Question

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

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％的身体和html高度？即使您希望身高最小为100％，也要做身高的最小身高：100vh。

第三 - 即使框架集未正确使用。您将网站内容http://satyam.esy.es/HealthFriends/加入网站 - http://healthfriends.in/。那么为什么不复制粘贴内容和资源，因为框架集中没有额外的框架。

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

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

希望这有助于您调试和开发。感谢

网页高度在移动旅行中拉长

1 个答案: