iphoneX的适配问题
iphoneX();
function iphoneX(){
var oMeta = document.createElement('meta');
oMeta.setAttribute('name',"viewport");
oMeta.setAttribute('content',"width=device-width,initial-scale=1.0,viewport-fit=cover");
document.getElementsByTagName('head')[0].appendChild(oMeta);
}
@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");
}
iphoneX的适配问题的更多相关文章
- 手机管家iPhoneX的适配总结
WeTest 导读 随着苹果发布会的结束,Xcode的GM版也上线了,也意味着iPhoneX适配之旅的开始. 一.设计关注篇 注意设计的基本原则:(苹果呼吁的) 规格原帖:https://develo ...
- iPhoneX快速适配,简单到你想哭。
研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...
- 微信小游戏广告位iphonex底部适配问题
最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...
- iPhoneX && iOS11 适配
最近实在是蛮闲的,这都得益于苹果爸爸给力的审核,已经半个月了(委屈) 这个问题已经很久了,但是还是希望分享给各位,当然网上的教程的确很多: 1.automaticallyAdjustsScrollVi ...
- css方法 - 移动端h5在iphonex的适配
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-rati ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 87、代码适配IphoneX
一.APP在iphoneX运行后不能占满,上下都有多余的边 解决方法:把旧的image.xcassets中的LaunchImage删掉,重新创建并在Images.xcassets中为iPhone X添 ...
- 如何写一个适配iPhoneX的底部导航
引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
随机推荐
- Vue / keep-alive使用
keep-alive keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素 <keep-aliv ...
- 道路模型--linear-parabolic model
读过很多道路追踪的论文,经常都需要道路模型的建模.我不知道是不是因为自己太笨还是怎样,好多人建的模型我实在无法理解他的用意何在,而且我真的深刻怀疑他们那些模型的参数是不是真的可以求出来.就比如这篇文章 ...
- Linux拷贝、移动、删除
cp:拷贝文件或文件夹(copy) - cp original_filename copy_filename(在当前目录生成拷贝文件,并改名为copy_filename) - cp original_ ...
- Mata标签,og标签
一.Mata标签 meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中.meta 的属性有两种:name和http ...
- 20180209-xml模块
xml的用法操作如下: xml格式如下: <?xml version="1.0"?> <data> <country name="Liech ...
- 七、WebApi跨域操作
情景:测试后返回"no response from server"? 请求响应: js调试控制台: 一.搜索安装 Microsoft.AspNet.WebApi.Cors 二.添加 ...
- SpringBoot---Favicon配置
1.概述 1.1.SpringBoot提供了一个默认的Favicon,每次访问都能看到: 2.关闭Favicon 在application.yml中设置关闭Favicon,默认开启: spring.m ...
- linux查找一个文件的路径
- CSD编码----数字信号处理--006
有符号数(Signed Digit Number , SD) SD编码 1.有三重值 {0,1,-1} 2.应用在不用进位的加法器或乘法器中能够降低复杂性 因为通常可以通过非零元素的数来估计乘法的工作 ...
- LOJ 3124 「CTS2019 | CTSC2019」氪金手游——概率+树形DP
题目:https://loj.ac/problem/3124 看了题解:https://www.cnblogs.com/Itst/p/10883880.html 先考虑外向树. 考虑分母是 \( \s ...