Question

我有下面列出的媒体查询。当屏幕宽度小于900时，我觉得设备是手机。这在我的电脑上测试时非常有效。但是，当我在我的高分辨率机器人涡轮增压器上进行测试时，它会加载平板电脑css文件。所以这似乎并没有考虑屏幕密度？如果是这样的话，你如何开发跨平台？

<link media="screen and (min-width:0px) and (max-width:899px)" rel="stylesheet" type="text/css" href="phone.css">
<link media="screen and (min-width:900px) and (max-width:1299px)" rel="stylesheet" type="text/css" href="tablet.css">
<link media="screen and (min-width:1300px)" rel="stylesheet" type="text/css" href="computer.css">

Answer 1

将此元标记添加到html文档的头部，使页面宽度等于手机屏幕的宽度：<meta name="viewport" content="width=device-width, initial-scale=1.0"/>。然后，使用min-device-width和max-device-wdith，而不只是min-width和max-width来定位手机的实际尺寸（许多移动设备会缩放网站，因此它们显示相同的内容他们会在浏览器上，改变它们看起来具有的尺寸。）

CSS Media Query不考虑屏幕密度？

1 个答案: