Chrome、Firefox 等是不是为移动设备指定最大设备宽度？

Posted 2023-03-06

【中文标题】Chrome、Firefox 等是不是为移动设备指定最大设备宽度？

【英文标题】：Does Chrome,Firefox,etc specify max-device-width to mobile?Chrome、Firefox 等是否为移动设备指定最大设备宽度？

【发布时间】：2017-09-27 08:23:25

【问题描述】：

我在我的 html 文件中添加了一个媒体查询

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

然后我调整宽度以找到css将生效的点。

我在手机上测试的浏览器有：

铬; 火狐; 歌剧； android webkit 浏览器；

结果如下：

chrome、firefox 和 opera 在 max-device-width:360px 点更改样式； android webkit浏览器在max-device-width:1080px(我的屏幕分辨率是1080*1920)处改变样式；

我想知道chrome是否指定了移动设备最大设备宽度以及最大设备宽度的标准。

【问题讨论】：

您是否加入了<meta name="viewport" content="width=device-width, initial-scale=1">？

@Manngo 之前没加，加了之后，虽然好看，就像字体看起来更大了，但是css效果的点没变。

【参考方案1】：

Firefox 提供它你可以使用

max-width: -moz-available;

【参考方案2】：

我认为 chrome 或 android webkit 浏览器都会出错，但现在我认为它们都是正确的。他们都做得很好，他们提出的区别是因为不推荐使用设备宽度（https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width）。所以设备宽度是设备的实际宽度，因为不推荐使用，它将被视为宽度（视口宽度），即不是实际的设备宽度。

【参考方案3】：

为了更好的查看端口大小，他们的标准和用途看看下面的链接

"sizes for various devices"

其他趋势look here

是的，记得包含

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

【讨论】：

非常感谢。这意味着 max-device-width 不等于屏幕分辨率，因为我在您提到的链接中发现 iPhone 6 的视口大小为 375*667，而其屏幕分辨率为 750*1334。然后屏幕宽度是视口宽度的 2 倍（而我的设备是 3 倍）。我查看了该链接中的列表，我认为 chrome 将视口设为 300~400（与屏幕宽度相关）以实现大多数网站识别移动设备的请求。