如何防止橫向媒體查詢加載

Question

標題可能會有些混亂，但讓我解釋一下。 問題是我要創建一個自適應站點，其中有多個數字輸入。 我的CSS是這樣構造的：

@media screen and (max-width: 940px){
  // General styles for both orientations to prevent from duplicating same code
}
@media screen and (max-width: 940px) and (orientation: landscape) {
  // Styles that only landscape orientation needs
}

任何時候只要關注輸入，手機鍵盤就會顯示出來，並且我所有的樣式都將切換為橫向（據我所知，因為寬度大於高度，並且它認為設備處於橫向。）但是，我不想這發生。 如果出現鍵盤，我希望樣式保持原樣。

因此，預防此問題發生的方法是什么？

Answer 1

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

強制內容不縮放，並固定為設備屏幕尺寸。