CSS 媒体查询在手机和桌面上的工作方式不同（宽度相同）答案

【问题标题】：CSS media queries works differently on phone and on desktop (same width)CSS 媒体查询在手机和桌面上的工作方式不同（宽度相同）
【发布时间】：2014-05-05 05:24:22
【问题描述】：

我需要帮助。

我正在开发一个个人网站，我希望它具有响应性（手机、平板电脑、台式机）。问题是，当我在一种特定分辨率（例如手机）上设置媒体查询时，它在手机和桌面上的显示方式不同。当我将窗口宽度调整为手机宽度时，它没有显示任何问题，并且显示为我想要的。但是当我用手机访问我的页面时，会加载桌面版本（大型的，甚至不是中型的平板电脑）。我究竟做错了什么？感谢您的帮助！

这是我第一次处理媒体查询，所以如果您有任何建议，也请写下来。谢谢！

<link rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width: 480px)" href="css/small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:481px) and (max-width: 1000px)" href="css/medium.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1001px)" href="css/large.css">

我还想使用 min(max)-width，而不是 min(max)-device-width。我觉得这样更有用。

Here it is online

【问题讨论】：

问题是 min-width 和 max-width 不会给你想要的结果，因为现代智能手机只会渲染你的主容器，它是 1200px 宽。所以 min-width 和 max-width 总是与 1200px 进行比较。
感谢塞巴斯蒂安，元标记工作！现在它按原样显示。

标签： html css media-queries

【解决方案1】：

尝试设置<head></head>内部的宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

或者使用这样的媒体查询：min-device-width : 481px 而不是 device-width : 481px

【讨论】：

您必须修复视口大小，正如@sebastian 所说。在桌面浏览器上，视口是窗口大小。在移动设备上则不同，视口将大于实际屏幕尺寸。这是为了让网站在使用缩放的小型设备上运行良好。因此，如果没有视口元数据，您的手机会说“我的视口很大，所以我可以像桌面一样显示网站”