如何仅使用 CSS 移动屏幕进行检测

Posted 2023-02-19

【中文标题】如何仅使用 CSS 移动屏幕进行检测

【英文标题】：How to detect ONLY with CSS mobile screens

【发布时间】：2017-06-20 21:45:31

【问题描述】：

我在这里找到了很多讨论 CSS 和移动屏幕的主题。

搜索后，我找不到某些设备的解决方案。例如：摩托罗拉 Moto G4 Plus 使用 FULL HD 宽度（1080px），只有引导程序检测 xs-view 配置。

样式设置、尝试和尝试我无法设置一些样式。

那么，我怎样才能使用与 Bootstrap 相同的程序来设置我的样式以及适用于所有设备的一般程序？

请只使用 CSS 或尽可能多的 JS（如果可能，不要），与 bootstrap 相同。

我已经尝试了@media 屏幕和@media 所有查询。没用。

感谢阅读。

【参考方案1】：

所有触摸屏和移动设备（包括平板电脑、智能手机）都可以通过以下@media 规则使用 css 检测。

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

/* Regular CSS rules here*/

【讨论】：

10 月 20 日的演讲我不知道我是否可以相信这条规则。我试试看。

有效，即使只使用我以前使用过的(hover: none)，它也有效，但我想将它优化到完美，谢谢。 only 关键字可防止不支持具有媒体功能的 media 查询的旧浏览器应用给定样式。它在现代浏览器上有no effect。

@haZh 的回答也适用于我。这应该是最佳答案。

【参考方案2】：

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

W3schools：http://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

【讨论】：

谢谢。我使用这种查询解决了这个问题：@media screen and (max-width:767px), screen and (max-device-width:767px)

老实说，我对这个答案有疑问。它肯定适用于某些设备，但现在有很多 QHD 和 4K 移动设备，因此不会选择它们。我也不知道更好的解决方案是什么。

现已弃用：drafts.csswg.org/mediaqueries/#mf-deprecated

【参考方案3】：

CSS 媒体查询可以工作，但是大屏幕的 ipad 呢？ 您可以使用 javascript 执行以下操作：

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

【讨论】：

根据MDN，它已被弃用，不再推荐

【参考方案4】：

我找到了这段代码，并且适用于所有经典的安卓设备：

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