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。

Answer 2

你的原始回答确实是你所需要的（但是你错过了代码片段中的结束}而我假设这只是一个错字而不是它不起作用的原因）！

使用另一个答案中提到的宽度将无法检测纵向和横向，因为iOS设备将其宽度视为最短尺寸，并将其高度作为其最长尺寸，无论方向如何。因此，您的switch语句对于您的解决方案是必不可少的，而且正是您所需要的（请参阅here）。

我拿了你的代码并在我的iPhone上用这个jsFiddle运行它（有一些调整，比如添加缺少的右括号），它运行正常。如果您在删除Useragent检测后检查小提琴中的HTML面板（或者在Chrome中模拟iPhone），您会看到它将meta内容更新为initial-scale=0.8，因为这是默认值。

https://jsfiddle.net/80xj03cx/3/

由于Useragent检测，显然无法在浏览器中使用，并且没有orientationChange这样的事件。如果您需要运行iOS设备，您可以随时使用如下服务：https://appetize.io/demo（您甚至可以在演示中输入该小提示URL以查看它是否有效）。

function doOnOrientationChange() {  
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.6';
        break; 
      default:
        alert('portrait'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.8';
        break; 
    }
}

// Only bind the event on iPhone and iPad so we do not try and do this on any other device.
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    window.addEventListener('orientationchange', doOnOrientationChange);
    // Initial execution if needed
    doOnOrientationChange();
}

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

2 个答案: