如何编写针对所有移动设备和平板电脑的 CSS 媒体查询? [英] How to code CSS media queries targeting ALL mobile devices and tablets?

问题描述

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

这是我目前所拥有的.我正在处理的移动网站的 PSD 模型宽 640 像素.另一个是该网站的平板电脑版本，是 768 像素.我能够仅使用 max-width 在我的 Web 浏览器中测试该站点，但现在是让该站点在设备上运行的时候了，它仍在呈现常规的全尺寸网页.上面的两个查询是我最好的猜测.我哪里出错了?

解决方案

这可以通过 Level 4 Media Queries 来完成:(浏览器支持非常好 - CaniUse)

互动媒体功能

这里的想法是根据设备的功能定位设备.(顾名思义，检查容易成为移动目标的设备的大小或分辨率)

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

hover 媒体功能查询用户使用给定设备将鼠标悬停在页面元素上的能力.

所以回答这个问题...

移动设备/桌子的相似之处在于:

1) 设备主要输入机制的准确性是有限的.

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

@media (pointer:coarse) {/* 用于触摸目标"的自定义 css */}

div {宽度:400px；高度:200px；白颜色;填充:15px；字体大小:20px；字体系列:Verdana；行高:1.3；背景:绿色；}@media(指针:粗){div {背景:红色；}}

Codepen 演示

2) 主指向系统不能悬停

所以我们的媒体查询看起来像这样:

@media(悬停:无){/* 主要输入机制不能悬停的设备的自定义 css完全或无法方便地悬停}

注意:版本 59 之前的 Chrome/Android 需要 on-demand 值用于悬停/任意悬停媒体查询.此值后来从规范中删除，从 59 版开始，Chrome 不再需要.因此，要支持旧版本的 Android，您需要

@media (hover:none), (hover:on-demand) {/* 用于触摸目标"的自定义 css */}

div {宽度:400px；高度:150px；白颜色;填充:15px；字体大小:20px；字体系列:Verdana；行高:1.3；背景:绿色；}@media(悬停:无)，(悬停:点播){div {背景:红色；}}

<div>这里的背景在桌面"(支持悬停的设备)上为绿色，在移动"(不[轻松]支持悬停的设备)上为红色</div>

Codepen 演示

注意:

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

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

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

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

额外阅读

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

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

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

This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?

解决方案

This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)

Interaction Media Features

The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)

The pointer media feature queries the quality of the pointer mechanism used by the device.

The hover media feature queries the user’s ability to hover over elements on the page with a given device.

So to answer the question...

Mobile devices/tables are similar in that:

1) The accuracy of the primary input mechanism of the device is limited.

This means we could use the following media query:

@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 Demo

2) The primary pointing system can’t hover

So our media query would look like this:

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

NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59. So to support older versions of Android you need

@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 Demo

NB:

Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.

If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features

So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:

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

Extra reading

• Interaction Media Features and their potential (for incorrect assumptions)
• https://css-tricks.com/touch-devices-not-judged-size/

这篇关于如何编写针对所有移动设备和平板电脑的 CSS 媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！