javascript - 分辨率更高的手机上的响应式设计

Question

根据我的理解(如果我错了请纠正我)现代响应式网站会更改以适应您使用的设备的大小和类型。或者，如果窗口大小发生变化，则可以应用此方法。

我的问题是，为什么我的手机会像现代 1080p 显示器那样显示响应式网站。

基本上，我当前的显示器运行在 30 英寸，分辨率为 768p。我的手机也有 768p 的分辨率。

许多响应式网站使用媒体查询来根据像素宽度显示 CSS 文件。

这对我的显示器和手机来说不是一样的吗？

我的问题:如何根据屏幕尺寸(以英寸等为单位)而不是屏幕分辨率或像素数使网站响应。

编辑:我的响应式设计针对不同的像素宽度(媒体查询)具有 3 个级别的 CSS。在监视器或智能手机上观看时，它显示最高级别(767p 以上)。如何让我的智能手机显示我的最低级 CSS(低于 480p)，即使它实际上有更多像素。

Answer 1

我最近使用类似技术创建了一个网站 http://www.super-rod.tv/它同时针对 PC 和移动设备，并将响应动态浏览器宽度调整大小。我使用带有最大宽度列表的媒体查询从高到低。对于 1080P 屏幕，它具有最好的全屏显示，对于较大的屏幕(如 4K 屏幕)，它将以纹理背景为中心，在较低分辨率(如 768P)上，它使用较小的图像集，并且也像在 4K 屏幕上一样居中。如果您只针对移动设备，则可以使用设备宽度来代替，请参阅此处的引用 width versus device-width要强制使用最低的 CSS 集，您可以使用 1000px 的最大宽度(我不认为那些仍在 PC 上使用 800x600 的人会成为您的目标？)，这会传递所有桌面，或者您可以使用浏览器UA to tell(为所有IE、Safari、FF、Chrome、Opera等定义，其余为手机)。