[英]iOS6 landscape to portrait breaks the layout
I'm working on a web app that's responsive. 我正在开发一个响应迅速的Web应用程序。 I have set the viewport
meta tag to: 我已将viewport
meta标签设置为:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
I have no problems with orientation anywhere but on iOS6
. 除了在iOS6
上,我在其他任何方向上都没有问题 。 On that particular iOS
, when I change the orientation from landscape to portrait the content keeps the correct aspect ratio but partly disappears to the left, leaving a blank space to the right. 在该特定的iOS
,当我将方向从横向更改为纵向时,内容将保持正确的宽高比,但部分消失在左侧,而在右侧留出空白。
When I open the debugger for the iOS Simulator
( Safari > Develop > iPhone Simulator > URL ) and click at the html
tag - which is not overflowed - the page snaps back to where it should have been. 当我打开iOS Simulator
的调试iOS Simulator
( Safari>开发> iPhone Simulator> URL )并单击html
标签(未溢出)时,页面将恢复到应有的位置。
Note that I'm relying on the viewport
meta tag to get this done and not using any iOS
proprietary orientation mode. 请注意,我依靠viewport
元标记来完成此操作,而不使用任何iOS
专有的定向模式。 It works fine on: 它在以下方面工作正常:
iOS5.1.0
tested on iOS Simulator iOS5.1.0
在iOS模拟器上进行了测试 iOS7.0.0
tested on a real iPhone iOS7.0.0
在真实的iPhone上进行了测试 We don't support iOS4
nor lower versions. 我们不支持iOS4
或更低版本。 Anyone experiencing the same? 有人遇到同样的事情吗?
I found that it was an input field that caused the page to break when changing orientation from landscape to portrait. 我发现这是一个输入字段,当将方向从横向更改为纵向时,导致页面中断。
After even more digging, I found that the placeholder
text was the problem's root cause. 经过更多的挖掘之后,我发现placeholder
文本是问题的根本原因。 Taking the placeholder away would solve the problem. 删除占位符将解决问题。 But since it was a problem exclusive to iOS6
, I had to find another solution... This question let me to the right direction. 但是由于这是iOS6
独有的问题,所以我不得不找到另一个解决方案... 这个问题让我朝着正确的方向前进。
All I had to do was to give the input field's parent element (in this case a form) overflow: hidden
. 我要做的就是让输入字段的父元素(在本例中为表单) overflow: hidden
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.