将设备方向从横向更改为纵向时在x轴上溢出

因此，如帖子标题所示，在所有Webkit浏览器中将设备方向从横向更改为纵向时，我遇到x轴溢出问题，我只尝试过iOS和Android驱动的设备[iPhone 4，4S & 5，Samsung Galaxy Nexus，Samsung Galaxy II & III使用Google Chrome或Safari时出现问题的手机]。将设备方向从横向更改为纵向时在x轴上溢出

我已经把这个标签在我的网页的头：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

而且我也应该指出，我与媒体查询工作：

@media (min-width: 1200px) 

... 

@media (min-width: 980px) 

... 

@media (min-width: 768px) and (max-width: 979px) 

... 

@media (max-width: 767px) 

... 

@media (max-width: 480px) 

...

所以我想知道是否有人遇到了这个问题，如果你有解决方案，因为它真的很烦人。

为了更确切地说明发生了什么，我有一个基于twitter引导框架构建的移动web应用程序，它只能在移动设备和打击垫上查看。很显然，我需要使用媒体查询来更改布局，具体取决于您正在查看网络应用程序的屏幕大小。而我得到的问题是，当您在纵向模式下浏览页面时，您会将设备方向改为横向，然后再改回纵向，即使您刚刚着陆，内容也会比设备的宽度更大在纵向模式下的网页应用程序页面上，它的宽度与设备的屏幕宽度相同，所以只有在你转向横向并回到纵向后，我才能得到它。我希望这是一个足够好的解释（：

来源

2012-10-31 Roland

-1

你可以尝试

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

编辑
好吧，我通常没有这个问题使用与媒体查询META NAME像下面结合方向

@media screen and (min-width: 480px) and (orientation:portrait) { 

}

来源

2012-10-31 14:03:01

已经尝试过（：它不会在所有帮助）： – Roland

这并不提供答案的问题。要批评或要求作者澄清，请在其帖子下方留言。 –

@AlexisPigeon我认为“用户可扩展=否”是答案:( –

我在制作的页面上有同样的错误，在最小化页面后，我最终将其追踪到一个占位符：

<input placeholder="foo">

的错误，如果输入的宽度，使得出现比纵向宽度在风景模式下更广泛：

input { 
    width 95%; 
}

如果您所看到的错误也是由一个占位符，一个简单的overflow-x：隐藏在输入的父元素上，作为我的修复工作。

有一些关于workarond更多的讨论上Placeholder attribute on text input with iOS 6 from landscape to portrait

来源

2013-05-10 10:38:35 Esseb

将设备方向从横向更改为纵向时在x轴上溢出

回答

相关问题