检测移动设备和方向以添加代码

Posted

技术标签:

【中文标题】检测移动设备和方向以添加代码【英文标题】:Detect both mobile device and orientation to add a code 【发布时间】:2022-01-03 03:16:03 【问题描述】:

如果用户在移动设备上并且方向是纵向,我想向他们显示文本。

为了检测移动设备,我正在使用这个脚本:

if(/android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
  document.write("mobile");
else
  document.write("not mobile");

对于纵向模式,我使用的是这个 CSS:

@media (orientation: portrait) 
    .land-msg display: block;

但我不能将两者结合起来一起工作。

有没有一种方法可以让我在一个代码中同时检查移动设备和方向?

媒体屏幕尺寸不起作用,因为我不希望它在桌面浏览器调整大小时显示。

任何帮助表示赞赏。

【问题讨论】:

【参考方案1】:

我已使用以下代码使其工作:

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
    if(window.innerHeight > window.innerWidth)
        jQuery(".land-msg").css("display", "block");
    
else

谢谢。

【讨论】:

【参考方案2】:

您可以使用 matchMedia 来检测方向(最小/最大宽度等)

const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))


function matchMediaHandler(query) 
  if (query.matches)  // If media query matches (portrait)
    document.body.style.backgroundColor = "orange"
    document.body.innerText = isMobile ? 'Mobile Portrait' : 'Desktop Portrait' 
   else 
    document.body.style.backgroundColor = "yellowgreen"
    document.body.innerText = isMobile ? 'Mobile Landscape' : 'Desktop Landscape'    
  



// orientation query   
const orientation = matchMedia("(orientation: portrait)")

// add listener 
orientation.addListener(matchMediaHandler)

// trigger on load 
matchMediaHandler(orientation)

【讨论】:

【参考方案3】:

有一些纯 CSS 方法可以比 userAvent 嗅探更好地检测移动设备。换一种说法:永远不要进行 userAgent 嗅探。我保证你做错了。

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) 
    /* ... */

部分内容取自这里:https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134

【讨论】:

以上是关于检测移动设备和方向以添加代码的主要内容,如果未能解决你的问题,请参考以下文章

检测移动设备中的当前地理位置

在没有 GPS 的情况下获取设备移动方向

NGINX GeoIP 和在服务器级别检测移动设备

阻止移动网页上的设备旋转

检测到 Googlebot Desktop 为移动设备

在移动设备中更改方向时需要关闭弹出窗口