html - 为什么位置 : fixed, 宽度:100% 元素在 iOS 8 上延伸到视口(viewport)之外
<p><p>我有一个固定在页面顶部的元素，当你水平滚动时会跟着你滚动，CSS很简单:</p>
<pre><code>.thing {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: #CCCCCC;
text-align: right;
}
</code></pre>
<p>你可以在这里看到它:<a href="http://jsbin.com/cetutaxaju/1" rel="noreferrer noopener nofollow">http://jsbin.com/cetutaxaju/1</a> </p>
<p>在大多数浏览器上都可以正常工作，但在 iOS 8 上的 Safari 上，这个栏不是 100% 的视口(viewport)，而是 100% 的内容？! (在 iOS 7 上很好)</p>
<p>罪魁祸首似乎是元视口(viewport)设置:</p>
<pre><code><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
</code></pre>
<p>当我把它们拿出来时你可以看到:<a href="http://jsbin.com/cetutaxaju/3" rel="noreferrer noopener nofollow">http://jsbin.com/cetutaxaju/3</a> </p>
<p>有谁知道为什么会发生这种情况，或者如何更好地解决它？</p>
<p>我需要保留视口(viewport)设置，因为没有它们，真实站点将无法正常工作。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您是否尝试将 <strong>user-scalable=no</strong> 添加到您的元视口(viewport)设置？即:</p>
<pre><code><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
</code></pre>
<p>我遇到了类似的问题，并且已经为我解决了。</p></p>
<p style="font-size: 20px;">关于html - 为什么位置 : fixed, 宽度:100% 元素在 iOS 8 上延伸到视口(viewport)之外，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/29343947/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/29343947/
</a>
</p>
页:
[1]