如何编写针对所有移动设备和平板电脑的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在我的网络浏览器中测试网站,但是现在是时候让这个网站在设备上工作了,它仍然在渲染常规的全尺寸网页.以上两个问题是我最好的猜测.我哪里错了？

Answer 1

这可以通过4级媒体查询来完成:( 浏览器支持非常好 - CaniUse)

互动媒体功能

这里的想法是根据设备的功能来定位设备.(就像说,检查设备的大小或分辨率,往往是移动目标)

该指针媒体特征查询由该装置所使用的指针机构的质量.

该悬停媒体功能查询用户的悬停在页面上的元素与给定的设备的能力.

所以回答这个问题......

移动设备/表格类似于:

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
}

注意:版本59之前的Chrome/Android需要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演示

注意:

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

如果我们确实想要考虑辅助设备,我们可以使用any-pointer和any-hover功能

因此,如果我们希望将与指点设备连接的移动设备视为"桌面",我们可以使用以下内容:

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

额外阅读

• 交互媒体功能及其潜力(对于不正确的假设)
• https://css-tricks.com/touch-devices-not-judged-size/

Answer 2

我建议使用以下媒体标记,而不是最初使用特定宽度,或者使用方向或任何其他废话.

@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 */
}

那你用这些标签做什么？设置悬停和点击vs触摸事件的内容.

触摸设备(除了上面所述的灰色区域中的少数设备)具有与桌面设备非常不同的分辨率.请不要这样设置设计元素,而是设置导航元素.有些学生可能会哭,因为最大宽度的一些疯狂可能会更好,但有那么多高清手机,设备最大宽度很快变得无用是荒谬的.

但是,您应该使用宽度媒体宽度查询.但是,不要打扰max-device-width,只需要max-width和min-width.让上述标签解决您的触摸与非触摸用户的关系,根据窗口大小设置最小宽度与最大宽度地址并调整网站视觉效果.

此外,使用方向来确定它是否可移动只是愚蠢,因为即使是显示器也可以放置在各种方向上(我见过的3个显示器的常见设置是纵向中央监视器和横向侧监视器.)

对于宽视图,专注于使您的网站在各种宽度上清洁,忽略实际访问它的设备类型,只需确保您的屏幕以各种尺寸干净地显示.这是适用于桌面和移动设备的优秀设计.如果他们将您的网站放在他们屏幕左上角的一个小窗口中以供参考(或快速分心),同时在其他地方使用他们的大部分屏幕空间,应该是他们以及移动用户,更小的宽度是为.尝试其他任何事情很快就会成为网络开发的一条非常痛苦和自我挫败的道路.因此,对于那些较小的宽度,您可以将宽度设置为您想要的任何宽度,但我会包括一些我个人喜欢的宽度.

总而言之,你应该有这样的东西......

@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" />

在某些情况下它可能仍会中断,但这应该比许多其他解决方案更简洁,更完整.