为横向和纵向设置不同的初始比例答案

【问题标题】：set different initial-scale for landscape and portrait为横向和纵向设置不同的初始比例
【发布时间】：2014-07-07 08:09:48
【问题描述】：

我需要在 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 不能正常工作。有什么方法可以让它工作吗？

【问题讨论】：

媒体查询不就是为了这个吗？
我试过了，但它们在我的情况下不起作用。
在 switch 语句中你不需要在default case 之后添加break
究竟是什么不起作用....？

标签： ios css ipad

【解决方案1】：

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

我的 fixed 解决方案的演示可以在这里找到：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。

【讨论】：

你能用 xcode 模拟器来测试吗？ developer.apple.com/library/ios/documentation/IDEs/Conceptual/…只要你有Mac就免费...然后从模拟器中，你应该可以触发orientationChange
抱歉，我没有 Mac 也没有 iPhone。我已经在安卓手机上测试过了，它工作正常。您可以尝试在 iPhone 上打开 this plunkr 并对其进行测试（它是答案中 JS Bin 的副本）。在纵向上，文本应该很小，在横向上应该更大 - 因为 initial-scale 不同（请参阅 JavaScript 代码）。
我之前的 plunkr 链接好像失效了。请改用this。在单独的窗口中启动预览以使其全屏显示（并且没有编辑器）。

【解决方案2】：

您的原始答案确实是您所需要的（但是您错过了代码 sn-p 中的结束 }，我假设这只是一个错字，而不是它不起作用的原因）！

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

我在这个 jsFiddle 中获取了您的代码并在我的 iPhone 上运行它（进行了一些调整，例如添加缺少的右括号），它运行良好。如果您在删除 Useragent 检测（或者在 chrome 中模拟 iPhone）后检查小提琴中的 HTML 面板，您会看到它会将 meta 内容更新为 initial-scale=0.8，因为这是默认设置。

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

这显然不会在浏览器中工作，因为用户代理检测并且没有像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();
}

【讨论】：