具有更高分辨率的手机上的响应式设计

Responsive Design on mobile phones with higher resolutions

本文关键字：响应手机高分辨率更新时间：2023-09-26

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

我的

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

从本质上讲，我目前的显示器以 30 英寸的速度运行，分辨率为 768p。我的手机也有768p的分辨率。

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

我的显示器和手机不是一样吗？

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

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

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