为风景和肖像设置不同的初始比例

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.