兼容IphoneX
兼容IphoneX的显示,一般有两种方法,一种通过css的media来做兼容,一种是通过js来做兼容。
一、我们先讲CSS的方法,我们要做两步即可:
1. 全屏覆盖,html使用
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
2.通过对底部上移或者顶部下移进行处理
注:如果想下面constant env 属性有效果,请务必添加上面meta 标签才能实现。
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: ){
body{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.iphonex-pt{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.iphonex-pb{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.iphonex-mt{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
.iphonex-mb{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
.iphonex-pl{
padding-left: constant(safe-area-inset-left);
padding-left: env(safe-area-inset-left);
}
.iphonex-pr{
padding-right: constant(safe-area-inset-right);
padding-right: env(safe-area-inset-right);
}
.iphonex-ml{
margin-left: constant(safe-area-inset-left);
margin-left: env(safe-area-inset-left);
}
.iphonex-mr{
margin-right: constant(safe-area-inset-right);
margin-right: env(safe-area-inset-right);
}
.iphonex-bd-top-bg{
border-top: 88px solid transparent;
}
.iphonex-bd-top{
border-top: 44px solid transparent;
}
.iphonex-bd-bottom{
border-bottom: 34px solid transparent;
}
}
二、通过js来对IphoneX进行兼容
通过判断设配的宽度高度还有设备的像素是否是IphoneX
if($(window).width() === && $(window).height() === && window.devicePixelRatio === ){
$(".phonex-pb").css("padding-bottom","34px");
}
对于constant(safe-area-inset-bottom) 这样的属性完全可以不用写在media 媒体查询里面,上面只是做了公共样式处理,safe-area-inset-bottom 意义其实相当于 底部34px。类似padding-bottom:34px;考虑其他兼容问题,多做了一个透明border 处理方法,仅仅是一种解决方式而已,其实都能实现。
兼容IphoneX的更多相关文章
- ios兼容 iphoneX ios10 ios11
假设你有一个固定位置的标题栏,你的iOS10的CSS可能是这样写的: header { position: fixed; top:; left:; right:; height: 44px; padd ...
- 兼容iphonex底部那个
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ra ...
- IphoneX适配正确姿势
IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...
- ios web 媒体查询兼容
原文:https://blog.csdn.net/dear_zx/article/details/82785250 防止链接丢失,复制一下 兼容iphone4/4s: @media (device-h ...
- H5 设计尺寸
750*1218 微信下 兼容 7plus 内容高度 居中 1000px 内 750*1448 微信下 兼容 iphoneX 微信导航栏高度 64px 64px = 导航栏44+状态栏20 但是现在 ...
- wap2app(八)-- iphoneX 底部导航的兼容问题
iphoneX 没有home键,用其打开应用时,iphoneX的底部和应用底部导航重叠,不兼容. 解决办法: 打开manifest.json文件,在“plus”下加入以下代码(安全区域): " ...
- 手机管家iPhoneX的适配总结
WeTest 导读 随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始. 一.设计关注篇 注意设计的基本原则:(苹果呼吁的) 规格原帖:https://develo ...
- IPhoneX网页布局
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...
- 如何写一个适配iPhoneX的底部导航
引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...
随机推荐
- c# ?? 和?
static void Main(string[] args) { double? num1 = null; // ? 说明num1可以为空 ...
- 【WebAPI No.3】API的访问控制IdentityServer4
介绍: IdentityServer是一个OpenID Connect提供者 - 它实现了OpenID Connect和OAuth 2.0协议.是一种向客户发放安全令牌的软件. 官网给出的功能解释是: ...
- Qt Creator的下载和安装
原文:https://blog.csdn.net/weixin_38090427/article/details/83827678 一,Qt和Qt Creator的区别 Qt是C++的一个库,或者说是 ...
- TiDB
由于目前的项目把mysql换成了TiDb,所以特意来了解下tidb.其实也不能说换,由于tidb和mysql几乎完全兼容,所以我们的程序没有任何改动就完成了数据库从mysql到TiDb的转换,TiDB ...
- asp.net引用System.Speech实现语音提示
using System; using System.Speech.Synthesis; namespace testvoice { class Program { static void Main( ...
- DevOps 工程师实际上是做什么的
DevOps 工程师实际上是做什么的? 我们之前已经讨论过许多关于DevOps和DevOps世界的最新趋势了.但是DevOps工程师到底是做什么的? DevOps工程师以最纯粹的方式弥合了软件开发和运 ...
- Easyui datagrid combobox输入框非法输入判断与事件总结
datagrid combobox输入框非法输入判断与事件总结 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 常见事件 onSelect // 选择下拉列表 ...
- 对国内IoT的展望
这个世界上让任何人最安心的,莫过于自己能够完全控制,反之什么都无法控制的,万念俱灰之下,最后只有自我了结.芸芸众生都是在这个之间徘徊,尽可能的去掌控,尽可能的去拥有,觉得能够安心,其实只是自由的内心被 ...
- 【Linux】【Apatch Tomcat】Linux、CentOS7安装最新版Apartch Tomcat环境
1.前言 相当嫌弃,博客园搞掉了我快写完的 Tomcat. 请先安装 :[Linux][Java]CentOS7安装最新版Java1.8.191运行开发环境 虽然安装Tomcat没啥技术,但是还是记录 ...
- c:\windows\system32\config\systemprofile\desktop 打不开
Question 重启开机后显示桌面打不开: 再次重启后无效 Solution 打开注册表regedit如下路径,复制Desktop值到 同路径下的Desktop中,再重启.