是否可以仅通过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：Elegantly Resize Your Page With the @-viewport CSS Declaration
• 树屋博客：CSS Device Adaptation With @viewport
• 从Windows 8和Windows Phone 8中的Bootstrap documentation IE10开始，需要一些修复才能正常工作：
  

    

  Windows 8和Windows Phone 8中的Internet Explorer 10

       

  Internet Explorer 10无法将设备宽度与视口宽度区分开来，因此无法在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 and Device-Width。