在笔记本电脑和手机中应用响应式网页设计的差异

Question

考虑以下css代码：

@media only screen and (min-width: 0px) and (max-width: 768px) {
    ...
}

有人可以向我解释为什么当缩小我的笔记本电脑中的浏览器窗口并使其大小为768px时，才会应用css属性（在@media内部）并且我的手机的分辨率为1280x720不同和一个4.3英寸的屏幕？更准确地说，上面的媒体查询应用于我的移动设备，默认水平分辨率为1280px，而媒体查询具有（最大宽度：768px）。是否考虑了除解决之外的其他一些标准？如果是的话？也许是实际的屏幕尺寸？

非常感谢

Answer 1

默认情况下，移动浏览器使用的视口与手机的分辨率不同。您的网站将看到虚拟分辨率而不是物理分辨率。

如果您希望虚拟分辨率等于物理分辨率，请使用此HTML标记：

<meta name="viewport" content="width=device-width" />

Answer 2

智能手机在浏览器中的分辨率不同，宽度为320像素或360像素。

这是一个标准，因此可以在这样的小型显示器上阅读网站。

即使我的智能手机的显示分辨率为1920x1080，视口也是360px。

Here's读得很好。

Answer 3

我认为它与像素密度有关。例如，Galaxy SIV的宽度为1080px，像素密度为300％，屏幕宽度为360px。

您的媒体查询会考虑屏幕的像素密度

http://screensiz.es/phone