爲什麼Google Chrome會影響我的CSS @ media-queries？

我知道這個問題可能會引起混淆，但我的問題是我的CSS @media queries，特別是屏幕方向。爲什麼Google Chrome會影響我的CSS @ media-queries？

我有這個在我的網頁<head>：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

和一個簡單的CSS @media queries改變元素的風格，當屏幕是縱向：

@media screen and (orientation: portrait) { 

     #login_container { 
      width: 60%; 
     } 
    }

所以問題是當我按下一個<input type="text">，[這隻發生在我的Android設備上]，當鍵盤打開寫入它，瀏覽器會將我的屏幕識別爲風景，所以我的CSS @media queries正在爲風景屏幕應用樣式。

但是奇怪的是，它只發生在<input>是type="text"或type="password"，如果沒有，問題不會發生。

我想這是因爲當鍵盤打開時，它將瀏覽器窗口調整爲其他大小，（在某些設備上）被識別爲橫向，因爲窗口寬度大於窗口高度。

我一直在Google上尋找解決方案，但我無法知道如何解決它。

感謝您的幫助！

2017-06-02 Javi

對不起，我還不能評論，但你有沒有試圖設置一個@media query與px而不是portrait/landscape？

我很確定你的問題是，正如你所說的，你的屏幕設備的大小，當keyborad被打開時，結果作爲一個/高度的計算，它將成爲你的瀏覽器的角度。

我認爲它不會發生在一個更大的屏幕智能手機或平板電腦上相同，從不知道使用哪個瀏覽器。至少你可以給它一個機會，並試圖澄清你的疑問:)

2017-06-02 21:39:57 AXL

回答