我创建了一个网站,它在除移动版 safari 之外的所有平台上都运行良好,其中页面高度被拉伸(stretch)并且在第一次点击后页面变得无响应。
html,body {
height:100%;
background:center no-repeat fixed url('../asset/images/logo1.jpg');
background-size: cover;
color:#444;
font-family: 'Lato', sans-serif;
}
我的元标记:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
最佳答案
第一个问题是框架集已被弃用,难怪它会导致 iPhone 的 safari 出现问题。请参阅 - https://developer.mozilla.org/en/docs/Web/HTML/Element/frameset .
其次 - 为什么需要 100% body 和 html 高度?即使您希望高度最小为 100%,也要对 body 执行 min-height:100vh。
第三 - 即使是框架集也没有被正确使用。您正在包括网站的内容 - http://satyam.esy.es/HealthFriends/进入网站 - http://healthfriends.in/ .那么为什么不复制粘贴内容和 Assets ,因为框架集中没有额外的框架。
最后 - 如果您无法从域 satyam.esy.es 中提取 Assets ,那么可能会出现问题,您将不得不自己开发 Assets 。在那种情况下,也为 bootstrap、datepicker 和 moment.js 发出 cdn 请求。并编写自己的 css 和 js。
关于您的 iPhone 问题 - 当然是框架集导致了问题。但也可能有其他原因。您需要使用 Mordenizr检查哪些功能适用于 iOS 浏览器,然后使用适当的 polyfill。
希望这对您调试和开发有所帮助。谢谢
关于html - 网页高度在移动浏览器中被拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39191359/