网页高度在移动 Safari 中被拉伸

Question

我创建了一个网站，它在除移动 safari 之外的所有平台上都能正常工作，其中页面高度被拉伸并且在第一次点击页面后变得无响应。

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">

编辑： Website in question

Answer 1

第一个问题是框架集已被弃用，难怪它会在 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/ 中。那么为什么不复制粘贴内容和资产，因为框架集中没有额外的框架。

最后 - 如果您无法从域 satyam.esy.es 中提取资产，那么可能会出现问题，您必须自己开发资产。在这种情况下，也为 bootstrap、datepicker 和 moment.js 发出 cdn 请求。并编写自己的 css 和 js。

关于您的 iPhone 问题 - 当然是框架集引起了问题。但也可能有别的东西。您需要使用Mordenizr 来检查哪些功能适用于 Safari iOS，然后使用适当的 polyfill。

希望这可以帮助您调试和开发。谢谢