Galaxy S7上的媒体查询

Question

好的，我使用Galaxy S7在同一服务器上的两个不同网站上进行了这些媒体查询

@media only screen and (min-width:501px) and (max-width: 999px) {

}


@media only screen and (max-width: 500px) {

}

在一个网站上，它在纵向移动视图、横向平板视图和电脑上都能很好地工作，但是在另一个站点上，它总是在平板视图中，我永远不能让它进入500px或更小的移动视图。那么，为什么它在我编写的一个站点上运行得很好，而在另一个站点上却不能工作，并且总是在平板电脑视图中工作呢？

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

请在head标签中添加meta标签。

原因：

使用<meta>浏览器现在可以控制页面的尺寸

width=device-width：Browser将页面的宽度设置为跟随设备的屏幕宽度。