@media CSS是否仅在纵向模式下不起作用？

Question

我一直在为自己网站上帖子网格的iPad纵向视图而苦苦挣扎。除了该视图外，该网格在所有其他视图中看起来都不错，在该视图中，网格显示在容器的最右侧。

主题的（Alexandra）CSS如下：

@media only screen and (max-width: 941px) and (min-width: 768px).container {width: 726px;}

我尝试使用以下方法对此进行修改：

@media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) .container {width:510px;}

并且：

 @media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {width:510px !important;}}

也：

 @media only screen and (min-device-width: 768px) and (max-device-width: 941px) and (orientation:portrait) { .container {margin-right: 200px;}

以及其他几种配置，没有任何反应。关于我所缺少的东西或为什么它无法正常工作或更改任何东西的任何想法？非常感谢您的阅读！任何见解都将不胜感激！

Answer 1

HTML5引入了一种方法，使Web设计人员可以通过<meta>标签来控制视口。

因此，您应该将这个meta添加到index.html：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">