Question

目前，我正在使用此媒体查询来定位移动设备屏幕：

@media only screen and (max-width: 767px) {}

在html中使用此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

它可以在大多数设备上运行，比如iPhone，但是当从三星S6-7等高密度设备访问网站时，它可以提供桌面版本，具有超小的界面。如果我改成它：

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi) {}

它解决了布局问题，盒子，容器等看起来一样，但UI仍然超小。

无论实际的硬件像素密度如何，如何让所有移动设备（纵向模式）的网站看起来都一样？

Answer 1

现在正在使用此设置在S7上工作：

@media only screen and (-webkit-min-device-pixel-ratio: 4),
       only screen and (-webkit-device-pixel-ratio : 4),
       only screen and (device-width: 360px),
       only screen and (device-width: 640px),
       only screen and (orientation: portrait)

但它也适用于iPhone 6，设备像素比率为2 ......

我不知道它为什么会起作用。

使用CSS媒体查询定位高密度移动屏幕

1 个答案: