由于在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. jquery操作ID带有变量的节点

    var indexNode='content'+index;$("#"+indexNode).show( 'puff', { }, 500, callback );

  2. Ueditor中代码的高亮和背景在前端页面的实现

    首先废话就不多说,这个富文本编辑器的下载和js等基本文件的导入略. 我的最终目标是这样的,我们在页面中的富文本框中输入代码,希望它能够被后台接受.存入数据库,当通过服务器将这些代码再一次显示在前台的页 ...

  3. Linux 系统管理命令 - free - 查看系统内存信息

    命令详解 重要星级: ★★★★★ 功能说明: free 命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. 语法格式: free [option] free [选项] 说 ...

  4. Swift4 内存管理, 可选链, KeyPath

    创建: 2018/03/09 完成: 2018/03/09 参照型数据与ARC  ARC ● Swift里, 只有类实例与闭包实例是参照型 ● 生成时参照值为1, 被代入等每次+1, 减少每次-1 ● ...

  5. bat批处理文件夹内文件名的提取

    有时候会在做某些东西的时候 我们要提取某个文件夹的所有文件名,一个一个打出来那不是 现实的 所以这个时候就用到了一个比较简便而又快捷的方法 在所在的文件夹内新建一个a.txt 在a.txt编辑DIR ...

  6. bzoj 1079: [SCOI2008]着色方案【记忆化搜索】

    本来打算把每个颜色剩下的压起来存map来记忆化,写一半发现自己zz了 考虑当前都能涂x次的油漆本质是一样的. 直接存五个变量分别是剩下12345个格子的油漆数,然后直接开数组把这个和步数存起来,记忆化 ...

  7. bzoj 1296: [SCOI2009]粉刷匠【dp+背包dp】

    参考:http://hzwer.com/3099.html 神题神题 其实只要知道思路就有点都不难-- 先对每一行dp,设g[i][j]为这行前i个格子粉刷了k次最大粉刷正确数,随便n^3一下就行 设 ...

  8. hdu 5201 The Monkey King【容斥原理+组合数学】

    原来我一开始以为的\( O(n^2) \)是调和级数\( O(nlog_2n) \)的! 首先枚举猴王的桃子个数\( x \),然后使用容斥原理,枚举有至少\( k \)个不满足的条件,那么这\( k ...

  9. 实现简单版的LinkedList

    相比ArrayList,双链表的数据结构就复杂多了,想要弄清代码的意思还是要搞清数据结构层面的变化. package cn.sp.chapter03; import java.util.Concurr ...

  10. linux 文件 chgrp、chown、chmod

    linux 默认情况下有会提供6个terminal 来让用户登录,使用[Ctrl]+[Alt] +[F1]~[F6] 组合 linux 文件 任何一个文件都具有"user,Group及Oth ...