OGeek|极客世界-中国程序员成长平台

标题: ios - 是否可以仅通过 CSS 为 iOS 设置视口(viewport)，而无需元标记 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 11:42
标题: ios - 是否可以仅通过 CSS 为 iOS 设置视口(viewport)，而无需元标记

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

我发现唯一可行的选择是

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

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

有人知道我应该改变什么吗？或者有可能吗？

---

Best Answer-推荐答案

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

浏览器支持:

• 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
• 截至 Bootstrap documentation Windows 8 和 Windows Phone 8 中的 IE10 需要一些修复才能正常工作:
  

  Internet Explorer 10 in Windows 8 and Windows Phone 8

  Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

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

  However, this doesn't work as it causes Windows Phone 8 devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to include the following CSS and JavaScript to work around the bug until Microsoft issues a fix.

  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)
  }
  

  For more information and usage guidelines, read Windows Phone 8 and Device-Width.

关于ios - 是否可以仅通过 CSS 为 iOS 设置视口(viewport)，而无需元标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17061422/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4