另一个 CSS 媒体查询实例在桌面上正常，但在移动设备上不行答案

【问题标题】：Yet another instance of CSS media queries OK on desktop but not on mobile另一个 CSS 媒体查询实例在桌面上正常，但在移动设备上不行
【发布时间】：2012-11-11 05:13:21
【问题描述】：

我对 CSS 世界是全新的，更不用说媒体查询了，所以任何帮助都将非常感激！

我正在为学校完成一项任务，我们必须测试我们的媒体查询并为各种设备尺寸提供不同的样式表。我想我基本上遇到了与这篇文章中讨论的问题相同的问题：Media Queries - Mobile vs Desktop Browser，但我不清楚该评论者是如何解决他们的问题的。

我认为这可能是错误所在的相关编码？：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->

<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />

查询可以在桌面浏览器上运行，但是当我在 Opera Mobile Emulator 上以（我认为是）正确的屏幕分辨率启动页面时，它们都采用默认的最小宽度 320px 样式。我也尝试将“，屏幕和（最小设备宽度：”）添加到标签中，但由于某种原因，两者都取消了整个事情，我最终在白屏上得到了我的基本 HTML。我'也尝试过 @media 的事情，然后我在下面发布样式，但似乎 Dreamweaver 6 拒绝了它们 (???) 因为它们以栗色突出显示，而且我再次得到白色背景。

所以...我会非常非常感谢任何帮助！我还应该提到非常小的最小宽度是作业的一部分。我个人认为它们都太小了！非常感谢:)

【问题讨论】：

标签： css opera media-queries

【解决方案1】：

Opera Mobile Emulator 的工作方式与真实应用程序大不相同。我建议您在移动设备上实时测试该网站。

【讨论】：

谢谢！今晚我要和一些人共进晚餐，我希望他们有各种分辨率的手机。我想让它在模拟器中工作的原因是因为我很确定教练会用它来检查每个人的工作......
只是一个小小的更新，我稍微调整了编码，使其在我认为有意义的地方同时具有最小宽度和最大宽度，并且我还包括“手持”作为媒体除了“屏幕”之外的类型。还是不行！ Dreamweaver 上的实时预览和桌面浏览器上的实际大小调整工作正常，但它只是 Opera Emulator。我想是否有人能告诉我这种类型的东西在模拟器中并不总是正确呈现的事实？...但我有点假设它是为了处理这样的事情。
无论如何，这是新代码，如果有人能解释一下！这是其中两个的示例，因为有字符限制。