ios - 是否可以仅通过 CSS 为 iOS 设置视口，而无需元标记

Question

我需要在一个页面上使用视口，我只能更改 CSS。这意味着我无法访问 HTML，因此我无法将著名的元标记放在那里。

我发现唯一可行的选择是

@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 2;
    zoom: fixed;
}

但我没能得到正确的结果。当我旋转设备时，它仍然保存相同的宽度。

有没有人有一些想法我应该改变什么？或者有可能吗？

Answer 1

在撰写本文时（Dez '13），CSS Device Adaption（包括@viewport）还没有准备好使用，而且还远远没有完美的浏览器支持。因此，目前无法仅通过 CSS 为 iOS 设置视口。

浏览器支持：

• Internet Explorer 10 ( msdn.microsoft.com ) – 供应商前缀：@-ms-viewport
• Opera Mobile 11 ( dev.opera.com ) – 供应商前缀：@-o-viewport

更多的信息：

• html5hacks.com：使用@-viewport CSS 声明优雅地调整页面大小
• 树屋博客：使用 @viewport 进行 CSS 设备适配
• 从Bootstrap 文档开始，Windows 8 和 Windows Phone 8 中的 IE10 需要一些修复才能正常工作：
  

  Windows 8 和 Windows Phone 8 中的 Internet Explorer 10

  Internet Explorer 10 不会区分device width和viewport width，因此无法在 Bootstrap 的 CSS 中正确应用媒体查询。通常，您只需添加一个快速的 CSS 片段来解决此问题：

  @-ms-viewport       { width: device-width; }
  

  但是，这不起作用，因为它会导致 Windows Phone 8 设备显示主要是桌面视图，而不是狭窄的“电话”视图。要解决此问题，您需要包含以下 CSS 和 JavaScript 以解决该错误，直到 Microsoft 发布修复程序。

  CSS：

  @-webkit-viewport   { width: device-width; }
  @-moz-viewport      { width: device-width; }
  @-ms-viewport       { width: device-width; }
  @-o-viewport        { width: device-width; }
  @viewport           { width: device-width; }
  

  JS：

  if (navigator.userAgent.match(/IEMobile/10.0/)) {
    var msViewportStyle = document.createElement("style")
    msViewportStyle.appendChild(
      document.createTextNode(
        "@-ms-viewport{width:auto!important}"
      )
    )
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
  }
  

  有关更多信息和使用指南，请阅读Windows Phone 8 和 Device-Width。