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