首页 > 其他分享 >js判断当前手机是否有touch bar

js判断当前手机是否有touch bar

时间:2022-11-29 17:22:32浏览次数:45  
标签:bar devicePixelRatio height width window && touch const js

参考资料:https://useyourloaf.com/blog/iphone-12-screen-sizes/

export const hasBottomToolBar = () => {
  return (
    /iphone/gi.test(navigator.userAgent) &&
    window.devicePixelRatio &&
    window.devicePixelRatio >= 2 &&
    window.screen.height >= 812
  )
}

  

export function isIphonex() { // 判断是不是X类型手机
    // X XS, XS Max, XR,11, 11pro,11pro max,12mini,12, 12 pro,12 pro max
    const xSeriesConfig = [
      {
        devicePixelRatio: 3,
        width: 375,
        height: 812,
      },
      {
        devicePixelRatio: 3,
        width: 414,
        height: 896,
      },
      {
        devicePixelRatio: 2,
        width: 414,
        height: 896,
      },
      {
        devicePixelRatio: 3,
        width: 315,
        height: 812,
      },
      {
        devicePixelRatio: 3,
        width: 390,
        height: 844,
      },
      {
        devicePixelRatio: 3,
        width: 428,
        height: 926,
      }
    ];
    // h5
    if (typeof window !== 'undefined' && window) {
      const isIOS = /iphone/gi.test(window.navigator.userAgent);
      if (!isIOS) return false;
      const { devicePixelRatio, screen } = window;
      const { width, height } = screen;
      return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
    }
    return false;
}

  

标签:bar,devicePixelRatio,height,width,window,&&,touch,const,js
From: https://www.cnblogs.com/ygunoil/p/16935975.html

相关文章

  • JS基础12--break和continue
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maxim......
  • JS基础11-3强制类型转换Boolean
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • spring mvc 环境 过滤器设置utf8字符编码和配置Logback日志及json支持(四)
    web.xml配置过滤器支持中文的请求和响应<filter><filter-name>characterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.Char......
  • Invalid options in vue.config.js: "before" is not allowed
    这个问题已解决,webpack的版本不同导致的,需要把vue.config.js中before改成onBeforeSetupMiddleware,并且到index.js中的app.use改为app.app.use,即可完美解决。   ......
  • java小工具util系列8:JSONObject获取key
    场景问题:JSONObject获取所有的key解决方案技巧:JSONObject获取key:↓JSONObjectobj;for(Map.Entry<String,Object>entry:cutReceiveAlarmMessageObject.entrySet......
  • 大咖说·图书分享|深入浅出 Node.js
    Node.js有哪些特性?在应用构建的时候有哪些注意事项?入门同学如何实现技术进阶?本期大咖说,阿里云高级技术专家朴灵携作品《深入浅出Node.js》展开分享。 嘉宾介绍......
  • nodejs版本升级到18后,无法启动和打包vue2项目
    引言最近在升级nodejs版本到v18.7.0后启动项目报digitalenveloperoutines::unsupported,经过多方查找最终找到解决方法,特写下此篇原因node.js的版本问题因为node.js......
  • android自定义view实现progressbar的效果
    一键清理是很多Launcher都会带有的功能,其效果也比较美观。实现方式也许有很多中,其中常见的是使用图片drawable来完成的,具体可以参考这篇文章:​​模仿......
  • Fastjsonfan反序列化(1)
    前言之前只是对FastJson漏洞有简单的一个认知,虽然由于网上fastjson漏洞调试的文章很多,但是真正有着自己的理解并能清楚的讲述出来的文章少之又少。大多文章都是对已知的漏......
  • Java加载js
    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为trueAndroid(Java)与JavaScript(HTML)交互有四种情况:1)Android(Java)调......