Css iPhone视口高度在横向模式下过大

我第一次在一个快速响应的网站上工作，并注意到iPhone4S上iOS7中Safari的一个相当不受欢迎的功能。我不确定，这个问题也可能在操作系统的更高版本中持续存在

问题：正如您在上面的我的gif中所看到的，视口中没有以纵向模式滚动，因为html和body标记的高度在CSS中设置为100%。你看到的3个div都有33.33%的高度，这意味着它们都应该占据页面的三分之一。在肖像模式下，他们会这样做

但是，当视图切换到横向模式并且用户尝试滚动时，页面会滚动，就好像高度大于视口的100%。不应该有滚动，因为所有的元素应该完全构成100%的高度

我知道Safari会在点击屏幕时自动显示UI控件和地址栏，那么我的问题是，当UI控件出现时，是否有任何方法可以调整网站大小？或者，当UI控件存在时，是否有任何方法可以使页面上的所有内容都适合，而不进行任何滚动？我想有没有滚动在所有，在当网站是在肖像模式

我的测试站点可能只想在iPhone中查看这一点

我把我的代码放在下面的一个片段中。我不能用jQuery来处理这个问题。谢谢

html，正文{ 边距：0；填充：0；宽度：100%；高度：100%；背景：fff； 字体系列：Arial；溢出：隐藏； } p{margin:0；padding:0；}nav{height:100%；} .vCenter{ 位置：相对；顶部：50%；-webkit转换：translateY-50%； -ms转换：translateY-50%；转换：translateY-50%； } .选择权{ 边距：0；宽度：33.33%；高度：100%；背景：透明； 文本对齐：居中；文本转换：大写；字体大小：110%；光标：指针； -webkit触摸标注：无；-webkit用户选择：无； -moz用户选择：无；-ms用户选择：无；用户选择：无；浮点：左； -webkit过渡：背景0.5s轻松，颜色0.5s轻松，字体大小0.5s轻松； 过渡：背景0.5s轻松，颜色0.5s轻松，字体大小0.5s轻松； } .选项：悬停，.选项：活动{ 背景：0bb；颜色：eee； } @介质最小高度：299px，最大高度：371px{ .选择权{ 宽度：100%；高度：33.33%；框尺寸：边框框； } 作用{ 边框底部：无； } } @媒体高度：372px{ .选择权{ 宽度：100%；高度：124px；框大小：边框框； } 作用{ 边框底部：1px实心eee； } } @介质最小高度：373px，最大高度：568px{ .选择权{ 宽度：100%；高度：33.4%；框尺寸：边框框； } 作用{ 边框底部：无； } } 网状物

design

函数

高级

---

啊，整页设计。。。因为这样的废话，我放弃了做这些事情。我的建议是你会为此失眠的。我做到了，再也没有……@Darkrum lol，不是我想听的：。我只是尝试将所有高度值从%更改为vh，但没有效果。我想知道这是否真的可能？可能的重复：看看Sheepy提供的问题。那里有JavaScript代码可以改变Safari的行为。过来看。但我处理响应式网页设计的方式是让它滚动。头痛少了，你就有更多的空间做酷的事情。但在苹果最终进入真正的全屏模式之前，恐怕我们永远无法在safariat上真正感受到本机应用的感觉，尤其是在iPhone上。@Darkrum。解决方案似乎是：html{position:fixed}，但是当我的按钮现在处于活动状态时，我遇到了一些问题。唉，哈哈