如何防止横向媒体查询加载

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">

强制内容不缩放，并固定为设备屏幕尺寸。