所有的触摸屏和移动的设备（包括平板电脑，智能手机）都可以被css检测到，并遵循以下@media规则。

@media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}

@media规则用于为不同的媒体类型/设备定义不同的样式规则。
如果它不起作用，检查你的代码。你可能在某个地方打错了字。
示例：

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

早期帖子：How to code CSS media queries targeting ALL mobile devices and tablets?
W3学校：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS媒体查询可以，但是大屏幕的iPad怎么办？你可以用javascript做以下事情：

if (window.orientation !== undefined) {
  document.body.classList.add("mobile");
}

我发现这个代码，并在所有经典的Android设备的作品：

/* For Mobile Portrait View */
@media screen
  and (max-device-width: 480px)
  and (orientation: portrait){
    html{
     background-color: red;
     width: 80%;
    }
}
 
/* For Mobile Landscape View */
@media screen
  and (max-device-width: 640px)
  and (orientation: landscape){
   html{
      background-color: red;
     
    }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen
  and (max-device-width: 640px){
    html{
      background-color: red;
     
    }
}

来源：https://www.geeksforgeeks.org/css3-media-query-for-all-devices/

对于IOS（iPhone和iPad）和Android上的Mozilla：

@media only screen and (hover: none) and (pointer: coarse){
/* Regular CSS rules here*/
}

但对于Android上的Chromium：

@media only screen and (hover: hover) and (pointer: coarse){
/* Regular CSS rules here*/

}
请参阅媒体查询测试程序：https://hover-pointer-media-query.glitch.me/