移动设备分辨率(宽度、高度)屏幕大小标题

比你想象的还要糟糕。

UA像素:320x240

这通常是一个谎言。关于IEMobile版本<8(Windows Mobile<6.1.4)具有640x480像素的设备仍报告自己为320x240。此外,在IEMobile的大多数版本中,视图可能会在一定程度上被缩放,因此必须点击的设计大小与UA像素大小无关。

在IEMobile 8之前,液体布局的机会有限。然而,在WinMobile 6.5上的IEMobile 8中,无论您喜欢与否,您都可以获得XGA分辨率,并将其缩小。哦,没有办法从头部嗅探IEM8-on-6.5和IEM8-on-6.1。

我不确定你的应用程序的确切目的是什么,但是如果你的目标包括IEMobile的极度恐怖,那么输出能精确呈现屏幕大小的HTML/CSS几乎是不可能的。

以下是常见屏幕分辨率标题的列表:

X-UP-devcap-screenpixels

或

UA-pixels

X-JPHONE-DISPLAY

我看了谷歌为他们的移动Adsense提供的代码片段,这是他们目前检查的三个。

偶然发现这个问题,我想我会添加一种方法来实现这一点,目前大约有四分之三的浏览器实现了这一点。

Client Hints

Client hints have about a 75% availability in browsers 在撰写本文时,显然不能全面依赖它们,但对于支持它们的浏览器来说,它们是有用的。

要使用客户端提示,您需要添加 <meta> 标签

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">

Accept-CH: DPR, Width, Viewport-Width, Downlink

支持此功能的浏览器随后将在每个后续请求中发送响应。

对你有用吗?

图像!

你可以相信 <picture>

GET myimage.jpg
DPR: 2
Viewport-Width: 1024
Accept: image/webp,image/*,*/*;q=0.8

然后,我们可以动态地提供正确大小的图像和最佳格式。

width 您甚至可以根据桌面或移动设备决定发送样式表的哪种变体(尽管您必须非常小心,这可能不是建议的,只是一个如何将其用于动态资源服务的想法)。