將設備方向從橫向更改爲縱向時在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軸上溢出

回答

相關問題