html - 网页高度在移动 Safari 中被拉伸(stretch)
<p><p>我创建了一个网站，它可以在除移动 safari 之外的所有平台上正常运行，其中页面高度被拉伸(stretch)并且在第一次点击页面后变得无响应。 </p>
<pre><code>html,body {
height:100%;
background:center no-repeat fixed url('../asset/images/logo1.jpg');
background-size: cover;
color:#444;
font-family: 'Lato', sans-serif;
}
</code></pre>
<p>我的元标签:</p>
<pre><code><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</code></pre>
<p><strong>编辑:</strong>
<a href="http://www.healthfriends.in" rel="noreferrer noopener nofollow">Website in question</a> </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>第一个问题是框架集已被弃用，难怪它在 iPhone 的 safari 上引起问题。请看- <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/frameset" rel="noreferrer noopener nofollow">https://developer.mozilla.org/en/docs/Web/HTML/Element/frameset</a> .</p>
<p>第二 - 为什么你需要 100% 的 body 和 html 高度？即使您希望高度最小为 100%，也请为 body 执行 min-height:100vh。</p>
<p>第三 - 甚至没有正确使用框架集。您正在包含网站的内容 - <a href="http://satyam.esy.es/HealthFriends/" rel="noreferrer noopener nofollow">http://satyam.esy.es/HealthFriends/</a>进入网站 - <a href="http://healthfriends.in/" rel="noreferrer noopener nofollow">http://healthfriends.in/</a> .那么为什么不复制粘贴内容和 Assets ，因为框架集中没有额外的框架。</p>
<p>最后 - 如果您无法从域 satyam.esy.es 中提取 Assets ，那么可能会出现问题，您必须自己开发 Assets 。在这种情况下，也为 bootstrap、datepicker 和 moment.js 发出 cdn 请求。并编写自己的 css 和 js。</p>
<p>关于您的 iPhone 问题 - 当然是框架集引起了问题。但也可能有别的东西。您需要使用 <a href="https://modernizr.com/" rel="noreferrer noopener nofollow">Mordenizr</a>检查哪些功能适用于 Safari iOS，然后使用适当的 polyfill。</p>
<p>希望这可以帮助您调试和开发。谢谢</p></p>
<p style="font-size: 20px;">关于html - 网页高度在移动 Safari 中被拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/39191359/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/39191359/
</a>
</p>
页:
[1]