1

我正在寻找正确的 CSS 媒体查询来定位所有手机(不是平板电脑和更大的手机),包括索尼 Xperia Z 等 1080 部手机。

现在我正在使用:

<link href='style/mobile.css' rel='stylesheet' type='text/css' media='screen and (max-device-width: 767px)' />

这适用于大多数设备,但在 Android Firefox 浏览器(虽然奇怪的是不是 Chrome)中,Xperia Z 只能获取桌面站点。

我试过搜索,但似乎没有人在谈论这些新的超高分辨率手机,我应该遵守新的标准吗?

4

3 回答 3

2

使用max-width而不是max-device-width目标CSS pixels

不要忘记viewport meta。具有大量像素的小型设备仍然具有较低的 CSS 像素数,因此它可以正常工作。

于 2017-12-04T16:09:39.453 回答
1

您可以在媒体查询中将宽度与分辨率结合起来。

@media screen and (max-device-width: 767px) and (min-resolution: 300dpi) { … }
于 2013-04-18T03:10:09.477 回答
0

我认为您不会在媒体查询中找到所需的内容。手机和平板电脑在分辨率上有很大的交叉。

以下是您可以根据 w3c 查询的媒体功能...

http://www.w3.org/TR/css3-mediaqueries/#media1

...似乎没有一个是你要找的。

不幸的是,我不知道是否有一个很好的方法来处理这个问题,即使是用户代理也没什么帮助。

于 2013-04-17T16:00:55.300 回答