ios - 是否可以仅通过 CSS 为 iOS 设置视口(viewport)，而无需元标记
<p><p>我需要在一个页面上使用视口(viewport)，我只能更改 CSS。这意味着我无法访问 HTML，因此我无法将著名的 <strong>meta-tag</strong> 放在那里。</p>
<p>我发现唯一可行的选择是</p>
<pre><code>@viewport {
width: device-width;
initial-scale: 1;
zoom: 1;
min-zoom: 1;
max-zoom: 2;
zoom: fixed;
}
</code></pre>
<p>但我没能得到正确的结果。当我旋转设备时，它仍然保存相同的宽度。</p>
<p>有人知道我应该改变什么吗？或者有可能吗？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>在撰写本文时(Dez '13)，<a href="http://dev.w3.org/csswg/css-device-adapt/" rel="noreferrer noopener nofollow">CSS Device Adaption</a> (包括 <code>@viewport</code>)还没有准备好使用，并且还远远没有完美的浏览器支持。因此，<strong>仅通过 CSS 为 iOS 设置视口(viewport)<em>目前</em>是不可能的。</strong></p>
<p><strong>浏览器支持:</strong></p>
<ul>
<li>Internet Explorer 10 (<a href="http://msdn.microsoft.com/en-us/library/ie/hh708740%28v=vs.85%29.aspx" rel="noreferrer noopener nofollow">msdn.microsoft.com</a>) – 供应商前缀:<code>@-ms-viewport</code></li>
<li>Opera Mobile 11 (<a href="http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/" rel="noreferrer noopener nofollow">dev.opera.com</a>) – 供应商前缀:<code>@-o-viewport</code></li>
</ul>
<p><strong>更多信息:</strong></p>
<p></p><ul>
<li>html5hacks.com:<a href="http://html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/" rel="noreferrer noopener nofollow">Elegantly Resize Your Page With the @-viewport CSS Declaration</a> </li>
<li>树屋博客:<a href="http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport" rel="noreferrer noopener nofollow">CSS Device Adaptation With @viewport</a> </li>
<li>截至 <a href="http://getbootstrap.com/getting-started/#browsers" rel="noreferrer noopener nofollow">Bootstrap documentation</a> Windows 8 和 Windows Phone 8 中的 IE10 需要一些修复才能正常工作:<br/><p></p>
<blockquote>
<h2>Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, 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:</p>
<pre><code>@-ms-viewport { width: device-width; }
</code></pre>
<p>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 <strong>include the following CSS and JavaScript to work around the bug until Microsoft issues a fix.</strong></p>
<p><strong>CSS:</strong></p>
<pre><code>@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</code></pre>
<p><strong>JS:</strong></p>
<pre><code>if (navigator.userAgent.match(/IEMobile/10.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
)
document.getElementsByTagName("head").appendChild(msViewportStyle)
}
</code></pre>
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/" rel="noreferrer noopener nofollow">Windows Phone 8 and Device-Width</a>.</p></blockquote> </li>
</ul><p></p></p>
<p style="font-size: 20px;">关于ios - 是否可以仅通过 CSS 为 iOS 设置视口(viewport)，而无需元标记，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/17061422/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/17061422/
</a>
</p>
页:
[1]