tips

iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2。iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3

适配iphoneX

目前了解的有3中方法,前两种方法是先判断机型

  1. 判断iphoneX机型-1

通过判断navigator.userAgent中的字符串iphone和iphoneX的设备宽和高

const isIphoneX = () => {
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

2.判断iphoneX机型-2

通过媒体查询,判断设备宽高和dpr

@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {}

3.通过css3的content
在iOS 11中的WebKit包含了一个新的CSS函数constant(),以及一组四个预定义的常量:safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom

body {
background: grey;
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}

适配iphoneX的更多相关文章

  1. Web App适配iPhoneX

    前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native App来说,适配并不算困难(当然 ...

  2. H5网页适配 iPhoneX,就是这么简单

    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

  3. 【css】适配iphoneX

    /*适配iphoneX*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-d ...

  4. H5网页适配 iPhoneX,就是这么简单(转)

    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

  5. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  6. 87、代码适配IphoneX

    一.APP在iphoneX运行后不能占满,上下都有多余的边 解决方法:把旧的image.xcassets中的LaunchImage删掉,重新创建并在Images.xcassets中为iPhone X添 ...

  7. 如何写一个适配iPhoneX的底部导航

    引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...

  8. 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域

    此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...

  9. React Native适配IPhoneX系列设备之<SafeAreaView />

    SafeAreaView的目的是在一个“安全”的可视区域内渲染内容.具体来说就是因为目前有 iPhone X 这样的带有“刘海”的全面屏设备,所以需要避免内容渲染到不可见的“刘海”范围内.本组件目前仅 ...

随机推荐

  1. How Cocoa Beans Grow And Are Harvested Into Chocolate

    What is Cocoa Beans Do you like chocolate? Most people do. The smooth, brown candy is deliciously sw ...

  2. 4.Redis持久化方案

    1.1 RDB持久化 RDB方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时Redis会自动将内存中的数据进行快照并持久化到硬盘. RDB是Redis默认采用的持久化方式. ...

  3. 如何查看Linux系统下程序运行时使用的库?

    Linux系统下程序运行会实时的用到相关动态库,某些场景下,比如需要裁剪不必要的动态库时,就需要查看哪些动态库被用到了. 以运行VLC为例. VLC开始运行后,首先查看vlc的PID,比如这次查到的V ...

  4. 67)PHP,cookie的基本使用和基本原理

    (1)允许  服务器端脚本  ,   在浏览器端   存数数据的一种技术.   其实cookie是浏览器的一种技术. (2)特点:允许服务器向浏览器发送指令,用来管理存储在浏览器端的cookie数据. ...

  5. Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    解决办法: 两个方案:1.注册处理函数时,用如下方式,明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) ...

  6. C#常用到的命令及常用控件的属性

    Application.Exit()应用程序退退出 this.Close()当前窗口退出 int h = DateTime.Now.Hour;      //获取当前时间的小时部分 int m = D ...

  7. CentOS-Samba服务安装与配置

    title date tags layout CentOS6.5 Samba服务安装与配置 2018-09-03 Centos6.5服务器搭建 post 例题: 在服务器中安装Samba服务,创建共享 ...

  8. 使用dtree构建框架导航

    前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree  http://www.destroydrop.com/javascrip ...

  9. java 面向对象 购物车

    一个商城包括多个商品.多个用户.拥有销售商品.展示商品和查找商品功能.2)    一个用户拥有一个购物车,购物车具有结算功能.3)    商城具有名称,静态字符串类型4)    用户类是抽象类,两个子 ...

  10. js原型理解

    https://www.cnblogs.com/liuhw/p/10646717.html __proto__的默认指向:https://www.jianshu.com/p/686b61c4a43d