网页高度在移动 Safari 中被拉伸
Posted
技术标签:
【中文标题】网页高度在移动 Safari 中被拉伸【英文标题】:webpage height is stretched in mobile safari 【发布时间】:2016-08-28 12:38:11 【问题描述】:我创建了一个网站,它在除移动 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
【问题讨论】:
尝试使用高度:100vh;而不是 100% 无效,@Sunny 请查看网站。 【参考方案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。
希望这可以帮助您调试和开发。谢谢
【讨论】:
感谢@vineet 指出框架集,这些确实造成了问题。但是我仍在寻找解决方案。由于框架集不是我添加的,而是以某种方式呈现在我的代码中(魔术,我知道)。需要找到一种方法来消除它们或通过更改操作系统来调整它们。 你的技术栈是什么? HTML,使用 jQuery 和 php 引导 事实证明,当我们使用 froward 和 masking 时,渲染域被封装在一个框架中。这反过来又会产生问题,因为框架在更改浏览器高度和宽度时不太灵活。我仍然想坚持(免费托管)转发,因为我还买不起托管。这就是我的网页在 iPhone 上表现异常的原因。 那么您是说satyam.esy.es/HealthFriends 是用与php 不同的语言制作的吗?如果是这种情况,那么没有人可以帮助,否则您应该将您的网站放在同一个域中。以上是关于网页高度在移动 Safari 中被拉伸的主要内容,如果未能解决你的问题,请参考以下文章