1.iphoneX的尺寸  375*812   上边有44px的危险区,下边有34px的危险区,剩下的是安全区。

2.viewport设值cover

 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">

3.媒体查询适配样式

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

 }

iphoneX 适配的更多相关文章

  1. css iphonex适配

    /*  iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...

  2. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  3. iphonex适配

    这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配

  4. IphoneX适配正确姿势

    IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...

  5. 关于H5页面在iPhoneX适配

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  6. iphoneX适配!!!

    方法1.js判断(以下采用Jquery) //适配iphonex && $(window).height() === && window.devicePixelRati ...

  7. 关于H5页面在iPhoneX适配(转)

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  8. 已有项目 iPhoneX 适配

    一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...

  9. iPhoneX 适配H5页面的解决方案

    由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况. 解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做 ...

随机推荐

  1. Lucene原理一

    Lucene 是一个高效的,基于Java 的全文检索库. 所以在了解Lucene之前要费一番工夫了解一下全文检索. 那么什么叫做全文检索呢?这要从我们生活中的数据说起. 我们生活中的数据总体分为两种: ...

  2. Amazon成本和产出的衡量方式

    Amazon用一种T-Shirt Size 估计的方式来做项目. 产品经理会对每一条需求评估上业务影响力的尺寸,如:XXXL 影响一千万人以上或是可以占到上亿美金的市场,XXL,影响百万用户或是占了千 ...

  3. Jersey Client传递中文参数

    客户端需要客户端的包: <dependency> <groupId>com.sun.jersey</groupId> <artifactId>jerse ...

  4. tomcat监听activemq jms配置

    当从webservice接收到信息的时候,消息生产者producer立刻把收到的消息放入到jms里面,消费者cusomer这时要设置一个监听,当生产者发送消息时,只要消息被发出来,消费者就会接收到消息 ...

  5. WPF ScrollViewer滚动条样式,适合触摸屏使用

    触摸屏上客户要求滚动条宽度大些,方便手指上下滚动,之前在网上看了个,原文找不到了,代码记录下. 效果如下: <ControlTemplate x:Key="ScrollViewerCo ...

  6. 修改ActiveReports验证文字“给不能为 null 的参数指定一个 null 值”

    转:http://gcdn.gcpowertools.com.cn/showtopic-13759.html ActiveReports官方网站:http://www.gcpowertools.com ...

  7. Open vSwitch 2.9.2 创建 RPM 安装包

    1.安装依赖环境 yum install gcc make python-devel openssl-devel graphviz autoconf automake rpm-build redhat ...

  8. Service的学习代码

    1. startService(new Intent(MainActivity.this, MyService.class))------->stopService(new Intent(Mai ...

  9. Python3.5 学习十

    多进程: 多线程和多进程的区别: Python多线程不适合CPU操作密集型的任务,适合IO操作密集型的任务(IO操作不占用CPU) Python折中解决多线程不能真正同步运算的方案是:起多个进程,每个 ...

  10. IAP远程在线升级

    IAP远程在线升级 在上一篇中实现了LWIP网口通讯,那么肯定要加个在线升级功能,这个功能所占用的资源很少,但在物联网中很重要也很实用.在线升级就是像手机一样,先下载好系统,然后点击升级~然后就没然后 ...