提问者:小点点

检测网站是否在没有CSS的移动设备中打开[重复]


未解决原始关闭原因

我找不到在JavaScript中访问我的网站打开的设备的方法。

我想要这样的东西:

if ( website.size < 768px) {
  //do something for mobile
}

我知道我可以在CSS中使用媒体查询,但我想使用JS,我很好奇如果没有CSS,这是否可能。

< code>window.matchMedia或< code>window.width似乎不起作用,因为它们占用了我的窗口的大小。

在相关问题上的不同之处在于,这种情况是制作一个响应式网站。因此,相关答案无法解决用户在计算机中调整窗口大小的情况。


共2个答案

匿名用户

你不应该真的依赖视口宽度来知道用户是否在移动,因为计算机用户可以在访问网站之前调整浏览器窗口的大小来欺骗你。

您可以在JavaScript中使用navigator.userAgent来了解他们的设备。

我找到了一个很酷的正则表达式,它使用navigator.userAgent属性检测用户是否在移动设备上。

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.write("mobile device");
}else{
  // false for not mobile device
  document.write("not mobile device");
}

它使用 navigator.user代理属性上的正则表达式检查所有主流移动客户端,如果匹配则返回true,否则返回false。

了解有关 navigator.userAgent 的更多信息

匿名用户

因此,有很多方法可以解决此问题

>

  • navigator.user代理与正则表达式,最好的方法,如果你不想让用户欺骗你的浏览器通过改变窗口大小像@Stranger说(相关答案检测移动浏览器)。

    使用它来获取网站的宽度和高度:(有关此答案的更多信息由@IT Goldman分享)

    const vw = Math.max(
      document.documentElement.clientWidth || 0,
      window.innerWidth || 0
    );
    const vh = Math.max(
      document.documentElement.clientHeight || 0,
      window.innerHeight || 0
    );