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

我需要在 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 不能正常工作。有没有办法让它工作？

最佳答案

原始问题中的 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 。

关于ios - 为横向和纵向设置不同的初始比例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23736506/