以下是几款流行手机的屏幕分辨率：
iPhone 6：1334 x 750
三星 Galaxy S5：1920x1080
在 CSS 中，我们有如下媒体查询：
@media only screen (max-width:600px)
这是针对小屏的，上面两款手机还有反应？显然它们的宽度远远超过600px。所以我的问题是，如果发生这种缩放，它是如何发生的？我觉得我在这里错过了 CSS 的基本概念。
编辑：我知道@media screen 实际上是在询问窗口大小而不是设备分辨率。我的问题可以更恰当地表述为“手机浏览器中的窗口大小如何缩放？”
【问题讨论】：
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
前段时间我也有同样的疑惑，所以我将总结一下我的发现。原来是相当的答案，所以我希望它有所帮助。
像素本身已经变得相对。拥有高像素密度的手机屏幕并不意味着您会自动在小屏幕上查看大型网站。像素密度用于设置确定网页将使用多少像素。
像素单位与查看设备的分辨率相关，即最常见的是计算机显示器。如果输出设备的像素密度与典型计算机显示器的像素密度相差很大，则用户代理应重新调整像素值。
那么我们的意思是什么？ CSS 像素已成为与实际像素解耦的网格单元。并且我们应该将像素密度设置为一个值，该值将清楚我们正在查看的屏幕尺寸，与我们实际拥有的像素数量无关。作为 Web 开发人员，这就是我们设置视口的原因，视口通过将像素数量除以像素密度来设置相对网格。因此，具有 640 像素宽度和 2.0 像素密度的设备将显示 320 像素宽的屏幕。
现在怎么办？
有两种方法可以解决这个问题。首先是，就像我说的，设置视口。但随着设备变得越来越大，这将导致移动网站的屏幕尺寸可能不适合完整的移动布局。
另一种选择是忽略这一点并开始响应式设计。有两个、三个或四个屏幕尺寸，你希望你的布局改变并坚持下去。如果您必须针对某些屏幕尺寸进行一些研究（例如：您是否希望 ipad 风景成为您的正常网页？）然后从那里开始。
哪个更好？我会说设置视口，因为这样可以确保显示正确的内容，而不管像素的实际数量。
进一步阅读
【讨论】：
<meta name="viewport" content="width=device-width, initial-scale=1"/>
我相信，你需要阅读this...
更重要的是，关于缩放和像素游戏，请阅读A Pixel Is not Pixel
摘录/指向思考
对于设置初始或最大比例的页面，这意味着宽度 属性实际上转化为最小视口宽度。为了 例如，如果您的布局需要至少 500 像素的宽度，那么您 可以使用以下标记。当屏幕大于 500 像素时 宽，浏览器将扩大视口（而不是放大）到 适合屏幕
还有，
但是，有两个棘手的地方：设备宽度媒体查询和 这 宽度=“设备宽度”>标签。两者都适用于设备像素，而不适用于 CSS 像素，因为它们报告网页的上下文，以及 不在其内部 CSS 工作原理上。
【讨论】：