如何编写CSS媒体查询以针对所有移动设备和平板电脑？

Question

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

这是我目前的进展。我正在开发的移动站点的PSD模型宽度为640px。另一个平板电脑版本的站点宽度为768px。我使用max-width在Web浏览器中测试了该站点，但现在是将该站点在设备上运行的时候，它仍然呈现常规完整尺寸的网页。上面的两个查询是我最佳的猜测。我错在哪里了吗？

- user1666487

---

这里的所有答案都不适用于这个问题，我来到这里是为了寻找一个单一的CSS媒体查询来针对所有移动设备，但是所有的答案都旨在针对多个设备？ - Dan

“target all”与“target multiple”的区别似乎只是语义学上的问题... - AGDM

Answer 1

这可以使用Level 4 Media Queries实现：(浏览器支持相当好 - CaniUse)

Interaction Media Features(交互媒体功能)

这里的想法是根据设备的功能来定位设备，而不是检查设备的大小或分辨率(这些往往是不稳定的指标)

pointer(指针)媒体功能查询设备使用的指针机制的质量。

hover(悬停)媒体功能查询用户使用给定设备时悬停在页面元素上的能力。

回答问题：

移动设备/平板电脑类似于以下特点：

1) 设备的主要输入机制的准确性受到限制。

这意味着我们可以使用以下媒体查询：

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}

<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Codepen演示

2) 主要指针系统无法悬停

因此，我们的媒体查询将如下所示：

@media (hover: none) { 
   /* custom css for devices where the primary input mechanism cannot hover 
   at all or cannot conveniently hover
}

NB：在Chrome/Android 59版本之前，悬停/任意悬停媒体查询需要on-demand值。但该值后来被从规范中移除，并且在Chrome 59版本中也不再需要。

所以，为了支持旧版Android系统，您需要：

@media (hover:none), (hover:on-demand) { 
  /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 150px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (hover:none), (hover:on-demand){ 
  div {
    background: red;
  }
}

<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>

Codepen演示

NB：

即使您将鼠标连接到移动设备/平板电脑上，悬停媒体功能仍然匹配none，因为它们的主要交互模式不支持悬停。

如果我们确实想考虑次要设备，我们可以使用任意指针和任意悬停特性

因此，如果我们希望连接有指针设备的移动设备被视为“桌面”，我们可以使用以下内容：

@media (any-hover: hover) { ... }

额外阅读

• 交互媒体特性及其潜在（错误假设）
• https://css-tricks.com/touch-devices-not-judged-size/

- Danield

---

我找到的最可靠的一个。 - Alejandro Bertinelli

并不总是有效。我正在使用联想Yoga 2 Pro（触摸屏），外接全高清显示器，Win10 1803。 在Firefox 62上：有效（div为绿色），在Chrome 69上：无效（div为红色） 所以再次尝试通过这个解决方法来获得幸运的一击 :/ - themenace

对于 Firefox，你需要：@media (pointer:coarse),(-moz-touch-enabled:1)。 - j.j.

我的Arch Linux电脑上的鼠标完全正常，但Firefox的指针匹配却是粗糙而不是细致->看起来不太可靠 :/ - xeruf

@Xerus - 所以当您单击此答案中的第一个代码片段时，您在Firefox中看到红色背景？我正在使用鼠标运行macOS，并且Firefox可以正确检测到鼠标。 - Danield

Answer 2

编辑说明：本文介绍的是一种适用于旧版浏览器的方法。已更新的答案使用了更加现代化的CSS，其中包含媒体查询，这样做非常容易。我主要建议使用我早期的代码来针对旧版浏览器进行特定的CSS设置。

与其最初使用具体的宽度或搞弄方向或其他无意义的操作, 我建议使用以下媒体标签...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

那么这些标签有什么用处呢？用于设置悬停和点击事件与触摸事件的不同。

除了一些灰色地带的设备，触摸设备与桌面设备的分辨率非常不同。不要使用它来设置设计元素，而是用于导航元素。有些人可能会认为某些最大宽度的疯狂做法更好，但是现在有太多高清晰度的手机了，设备最大宽度很快就变得无用了。

然而，您应该使用宽度媒体查询。但是，不要费心去设置max-device-width，只需设置max-width和min-width即可。让上述标签处理您的触摸用户与非触摸用户，让min-width与max-width根据窗口大小调整网站视觉效果。

此外，使用方向来确定它是否是移动设备是愚蠢的，因为甚至可以将监视器放置在各种方向（我见过的常见设置是纵向中心监视器和横向侧面监视器）。

对于宽度视图，请专注于使您的网站在各种宽度上保持清洁，忽略实际访问它的设备类型，只需确保您的屏幕在各种大小上显示清晰即可。这是适用于桌面和移动设备的良好设计。如果他们将您的网站放在屏幕左上角的小窗口中以供参考（或快速分心），而在其他地方使用大部分屏幕房地产，则应该为他们以及移动用户构建较小的宽度。尝试任何其他方法都会迅速走下一条非常痛苦和自我毁灭的Web开发之路。因此，对于这些较小的宽度，您可以将宽度设置为所需的任何值，但我会包括一些我个人喜欢的值。

因此，总体而言，您应该有类似以下的内容...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

虽然如此，请不要忘记在页面头部包含以下内容：

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

虽然在某些情况下仍可能出现问题，但这种解决方案应该比许多其他解决方案更简洁、更完整。

- lilHar

---

+1 for <meta name='viewport' content="width=device-width, initial-scale=1" /> 谢谢。 - Ahmad Dehnavi

有没有一种方法可以为所有移动设备编写通用的媒体查询？ - Prathamesh Doke

手机公司已经特别游说阻止这种情况发生，到目前为止，他们已经得到了自己的方式。 - lilHar

Answer 3

你在CSS文件的主体部分（1024像素及以上）设置了桌面主要样式，然后为特定屏幕尺寸设置了样式：

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

这将覆盖几乎所有正在使用的设备 - 我会集中精力确保最终范围（即320、480、568、768、800、1024）的尺寸样式正确，因为对于其他所有尺寸，它们只是响应可用尺寸。

此外，请不要在任何地方使用px - 使用em或%。

- Rahi.Shah

---

说“不要在任何地方使用像素(px)”，但在所有媒体查询中却使用了像素(px)。 - user9016207

@WillHoskings 我不知道你是在开玩笑还是认真的，但使用的像素是屏幕尺寸。 - Mateusz Sowiński