由于在iPhonex在状态栏增加了24px的高度，对于通栏banner规范的内容区域会有遮挡情况。

解决方案：在页面通栏banner顶部增加一层高度44px的黑色适配层，整个页面往下挪44px，这种做法虽然不符合苹果设计规范，可以先以这种方式处理，后续再优化banner设计展现。

对于底部footer可以增加34px的适配层，将操作栏上移34px，颜色可以自定义。

如果不这样设置 可以使用苹果官方提供的meta标签

viewport-fit：有三个值contain：可视窗口完全包含网页内容；cover：网页内容完全覆盖可视窗口；auto：同contain；

通过给页面设置viewport-fit=cover，可以将页面的布局延伸到页面顶部和底部

iPhoneX 适配H5页面的解决方案的更多相关文章

  1. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  2. 【H5】344- 微信 H5 页面兼容性解决方案

    点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. ...

  3. 关于H5页面在iPhoneX适配

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

  4. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  6. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  7. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  8. （转）使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...

  9. h5页面适配iPhone X的方法

    一.原生适配iphoneX 原生适配很简单,查看机型图:   只要用 #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>8 ...

随机推荐

  1. nginx中查看关于php的配置和php-fpm的重启等操作

    1.查看当前使用的php的配置信息 在php项目的根目录下新建findini.php文件,内容如下: <?php phpinfo(); ?> 然后在页面上访问就可以看到如下页面: 搜索Lo ...

  2. 【413】C 语言 Command line

    Command-Line Arguments All the executable programs above have a main(void) program more generally, e ...

  3. EF 连接MySql

    使用EntityFramework6连接MySql数据库(db first方式) http://www.cnblogs.com/24la/archive/2014/04/03/ef6-mysql.ht ...

  4. Excel VBA 入门

    一.文件格式 要使用VBA,excel文件必须保存为启用宏的工作簿,即xlsm格式. 二.启动VBA编辑器 打开工作簿后,要启动VBA编辑器,有两种方法,一是在工作表的名字上面点击右键,选择“查看代码 ...

  5. Wait示例分析

    wait方法使"当前线程"进入阻塞(等待)状态. 示例分析: public class TestWait { public static void main(String[] ar ...

  6. markdown（语法）入门学习：

    原文链接:https://segmentfault.com/a/1190000010223222#articleHeader9 1.标题 注:#后面保持空格 # h1 ## h2 ### h3 ### ...

  7. Linux 常用命令十六 文件权限管理

    一.ls -l 各段含义 wang@wang:~/workpalce/threading$ ls -l 总用量 drwxrwxr-x wang wang 12月 : a -rw-rw-r-- wang ...

  8. 数字货币期货与现货JavaScript量化策略代码详解汇总

    1.动态平衡策略 按照当前的 BTC 的价值,账户余额保留￥5000 现金和 0.1个 BTC,即现金和BTC 市值的初始比例是 1:1. 如果 BTC 的价格上涨至￥6000,即 BTC 市值大于账 ...

  9. JavaScript 入门案例

    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...

  10. 全选Js

    <th><input type="checkbox" value="" id="checkedAll" onclick=& ...