对于iphone X 兼容性处理的css适配方法和js适配方法

转载自 zhaoshuang1010

1. 如果想全屏覆盖，html里面请使用

ps:我的实际项目里，只在手机qq 里面去访问页面时候出现底部灰色安全区域块，可以说现在大部分公司页面都没有做兼容，包括百度，美团，京东...

so html 加此属性，网页就可以全屏覆盖。

2.如果想对某个元素进行底部上移或者顶部下移可以做以下适配。

注：如果想下面constant env 属性有效果，请务必添加上面meta 标签才能实现。

/*
* iphoneX pulic css
* 2018-01-01
*/

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

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;
}

}

3.js 方法，有些接口必须用js 去处理，不能用css样式实现，那么就可以这样做

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){

$(".phonex-pb").css("padding-bottom","34px");
}

ps: 写在后面

对于constant(safe-area-inset-bottom) 这样的属性完全可以不用写在media 媒体查询里面，上面只是做了公共样式处理，safe-area-inset-bottom 意义其实相当于底部34px。类似padding-bottom:34px;考虑其他兼容问题，多做了一个透明border 处理方法，仅仅是一种解决方式而已，其实都能实现。

//这是我整理的方法，只对个人项目的兼容，仅供参考。

对于iphone X 兼容性处理的css适配方法和js适配方法相关推荐

对于iphone X 兼容性处理的css适配方法和js适配方法
1. 如果想全屏覆盖,html里面请使用 <meta name="viewport" content="width=device-width,initial-sca ...
采集页面之后css布局混乱之rem适配布局
1.rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素( html)设置fo ...
兼容性好的CSS字体投影
<p>兼容性良好的css文字描边</p> <style><!-- h1, p { color: #fff; width: 100%; text-align: ...
移动端适配方案 flexible.js
前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
iphonex适配游戏_Cocos Creator 适配怎么做？
背景和原理因为手机设备的尺寸不一,分辨率也不一样,这给游戏开发适配带来了一点工作量.为了保证多端基本一致的视觉体验,在开发游戏的时候需要做游戏的适配. 在游戏开发前,需要了解的一个概念是游戏的&qu ...
用CSS让DIV上下左右居中的方法
例如一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念利用表格单元格的居中属性. 步骤 ...
css防止高度塌陷,css之高度塌陷及其解决方法
浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素 ...
html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明除非特别说明, ...

对于iphone X 兼容性处理的css适配方法和js适配方法

对于iphone X 兼容性处理的css适配方法和js适配方法相关推荐

最新文章

热门文章