ios – 为景观和肖像设置不同的初始尺度

我在Ipad上设置不同的风景和肖像初始尺寸

我加了头
< 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未定义,因此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时,我已经替换了原始问题中的整个值,而不仅仅是初始刻度= 0.6部分.

由于我只有Android设备要测试,我也删除了关于iPhone和iPad检测的IF条款.因此,该解决方案也适用于桌面浏览器.但请记住,桌面浏览器无法触发orientationchange事件.我试过Chrome的移动仿真器,它不起作用.我的解决方法是临时更改事件以调整大小.