适配iphoneX
tips
iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2。iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3
适配iphoneX
目前了解的有3中方法,前两种方法是先判断机型
- 判断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的更多相关文章
- Web App适配iPhoneX
前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native App来说,适配并不算困难(当然 ...
- H5网页适配 iPhoneX,就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- 【css】适配iphoneX
/*适配iphoneX*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-d ...
- H5网页适配 iPhoneX,就是这么简单(转)
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- 87、代码适配IphoneX
一.APP在iphoneX运行后不能占满,上下都有多余的边 解决方法:把旧的image.xcassets中的LaunchImage删掉,重新创建并在Images.xcassets中为iPhone X添 ...
- 如何写一个适配iPhoneX的底部导航
引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...
- 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...
- React Native适配IPhoneX系列设备之<SafeAreaView />
SafeAreaView的目的是在一个“安全”的可视区域内渲染内容.具体来说就是因为目前有 iPhone X 这样的带有“刘海”的全面屏设备,所以需要避免内容渲染到不可见的“刘海”范围内.本组件目前仅 ...
随机推荐
- 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 ...
- 4.Redis持久化方案
1.1 RDB持久化 RDB方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时Redis会自动将内存中的数据进行快照并持久化到硬盘. RDB是Redis默认采用的持久化方式. ...
- 如何查看Linux系统下程序运行时使用的库?
Linux系统下程序运行会实时的用到相关动态库,某些场景下,比如需要裁剪不必要的动态库时,就需要查看哪些动态库被用到了. 以运行VLC为例. VLC开始运行后,首先查看vlc的PID,比如这次查到的V ...
- 67)PHP,cookie的基本使用和基本原理
(1)允许 服务器端脚本 , 在浏览器端 存数数据的一种技术. 其实cookie是浏览器的一种技术. (2)特点:允许服务器向浏览器发送指令,用来管理存储在浏览器端的cookie数据. ...
- 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 }) ...
- C#常用到的命令及常用控件的属性
Application.Exit()应用程序退退出 this.Close()当前窗口退出 int h = DateTime.Now.Hour; //获取当前时间的小时部分 int m = D ...
- CentOS-Samba服务安装与配置
title date tags layout CentOS6.5 Samba服务安装与配置 2018-09-03 Centos6.5服务器搭建 post 例题: 在服务器中安装Samba服务,创建共享 ...
- 使用dtree构建框架导航
前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree http://www.destroydrop.com/javascrip ...
- java 面向对象 购物车
一个商城包括多个商品.多个用户.拥有销售商品.展示商品和查找商品功能.2) 一个用户拥有一个购物车,购物车具有结算功能.3) 商城具有名称,静态字符串类型4) 用户类是抽象类,两个子 ...
- js原型理解
https://www.cnblogs.com/liuhw/p/10646717.html __proto__的默认指向:https://www.jianshu.com/p/686b61c4a43d