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

Question

考虑以下 CSS 代码:

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

任何人都可以向我解释为什么在我的笔记本电脑中缩小浏览器窗口并使其正好大到 768px 时，才应用 css 属性(在@media 内)，而我的分辨率为 1280x720 的手机却不一样和 4,3 英寸的屏幕？更准确地说，上述媒体查询应用于我的手机，默认水平分辨率为 1280px，而媒体查询具有(最大宽度:768px)。它是否考虑了分辨率以外的其他一些标准？如果是哪个？也许实际的屏幕尺寸？

非常感谢

Answer 1

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

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

尽管我的智能手机的显示分辨率为 1920x1080，但视口(viewport)为 360 像素。

Here's一本好书。