Css 与移动设备相比，浏览器上的媒体查询看起来大不相同

使用此查询移植布局：

@media screen and (min-width : 320px) and (max-width : 640px)

这是url:

我最初只使用调整大小的浏览器。但当我试着在移动设备（iphone4、5、ipod4和galaxys2）上查看时，情况完全不同，完全不同

所以我开始专注于移动视图（这是一个网络视图，所以浏览调整大小不是一个问题），但当我尝试从Galaxy S3查看它时，从浏览器得到的结果几乎是一样的（糟糕）

---

我知道S3的工作方式应该是这样的（据我所知），因为它与浏览器的工作方式相同，但是其他设备呢，我做错了什么？

移动设备通常会缩放内容以适应屏幕，您需要告诉设备该站点是移动友好的，而不是缩放像素

在html文件的头部添加以下内容：

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

---

这应该适用于大多数android设备，iPhone可能需要也可能不需要不同的元标记。

查看Galaxy S2上的链接似乎可以如期工作。内容对于屏幕来说太大了一点，所以一些部分被切断了，但其他方面可以正常工作。我看到你在我的问题中添加了元标记，因此可能解决了这个问题，因为我在发布答案后才在移动设备上测试：）@DominicM，我已经添加了标记很久了。你确定

最大刻度=1.0是个好主意吗？这难道不能阻止放大页面吗？我刚刚在Galaxy S2上测试过，是的，你不能放大，但是缩放使得任何媒体查询都无用，所以我认为这是一个公平的权衡。我不知道另一种防止结垢的方法。此外，如果你使用响应式设计，你并不需要缩放，因为如果操作正确，网站应该完全适合设备，这使得缩放毫无用处，因为缩放没有质量或额外细节。很高兴听到，如果它解决了你的问题，请接受答案。正如我之前发布的，我已经在使用它了。还是有同样的问题。在某些情况下，可能需要缩放（在平板电脑或其他设备上查看）。因为他不需要它，所以没关系：）