ios - 为横向和纵向设置不同的初始比例

Question

我需要在 Ipad 上为横向和纵向设置不同的初始比例

我在 head 中添加了
<meta name="viewport" content="width=device-width, initial-scale=0.6" />

我尝试使用这个脚本

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {   
          function onOrientationChange()
          {
            var viewportmeta = document.querySelector('meta[name="viewport"]');
            switch(window.orientation) 
            {  
              case -90:
              case 90:
                viewportmeta.content = 'initial-scale=0.6';
                break; 
              default:
                viewportmeta.content = 'initial-scale=0.8';
                break; 
            }
          }

          window.addEventListener('orientationchange', onOrientationChange);
          onOrientationChange();

但 id 不能正常工作。有什么方法可以让它发挥作用吗？

Answer 1

原始问题中的 JavaScript 代码非常准确，几乎是正确的。我在浏览器中测试时的问题如下:window.orientation 是 undefined 并且 switch 子句因此是多余的。

可在此处找到我的固定 解决方案的演示:JS Bin ，但一定要在移动设备上对其进行测试(阅读下文了解有关此的更多详细信息)。

本质在JavaScript代码中，如下:

function onOrientationChange() {

    var landscape = screen.width > screen.height;
    var viewportmeta = document.querySelector('meta[name="viewport"]');

    if(landscape) {

        viewportmeta.content = "width=device-width, initial-scale=1.0";

    } else {

        viewportmeta.content = "width=device-width, initial-scale=0.5";

    }

}

window.addEventListener('orientationchange', onOrientationChange);
onOrientationChange();

可以看到我没有使用window.orientation，因为它在浏览器中测试时出现问题，所以我简单地检查了屏幕的宽度和高度的比例: var landscape = screen.width > screen.height。此外，在设置 viewportmeta.content 时，我已经替换了整个值，而不仅仅是原始问题中的 initial-scale=0.6 部分。

由于我只有 Android 设备要测试，所以我也删除了关于 iPhone 和 iPad 检测的 IF 子句。因此，该解决方案也适用于桌面浏览器。但请记住，桌面浏览器无法触发 orientationchange 事件。我已经尝试过 Chrome 的移动模拟器，但它不起作用。我的解决方法是暂时将事件更改为 resize。