html - 移动设备未检测到媒体样式表

Question

我是响应式网站的新手，尽管我之前构建了一些运行良好的响应式网站，但出于某种原因，我在使用当前网站时遇到了问题。在笔记本电脑或台式机上查看时，断点在调整浏览器大小时效果很好，但是在移动设备上查看时，它只是加载完整大小并使其适合屏幕宽度，而忽略了媒体特定的样式表。正如我所说，我过去曾使用过这种方法并且没有遇到任何问题，所以我希望有人能指出我正确的方向。我在论坛上看到过类似的问题，但对所提供的解决方案没有任何运气。

我正在处理的 URL 是 www.evolvecollaboration.com/test/index.html，下面是我的代码。

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

<link rel="stylesheet" href="_css/myer_reset.css">

<link rel="stylesheet" type="text/css" href="_css/structure.css" />  

<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/structure_tablet.css" />

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/structure_mobile.css" />

Answer 1

试穿这些尺码。我将它们用于我的媒体查询。

电话:只有屏幕和(最小设备宽度:320px)和(最大设备宽度:480px)

平板电脑:只有屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)

视网膜:只有屏幕和 (-webkit-min-device-pixel-ratio: 1.5)