由于在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. MFC project for a non-Unicode character set is deprecated

    error MSB8031: Building an MFC project for a non-Unicode character set is deprecated. You must chang ...

  2. wamp的手动安装

    Wamp的手动安装 (http://www.cnblogs.com/homezzm/archive/2012/08/01/2618062.html) 一.Apache2.4安装 1.修改\Apache ...

  3. java 调用动态库打包sdk

    java连接c++动态库并生成jar包提供给别人调用 1.需要将java通过jni生成头文件,并导入到c++项目并对c++进行jni方法继承 在项目的src目录执行,否则会提示 错误:找不到符号 ja ...

  4. Java-String 类的常用方法

    Java 中 String 类的常用方法 Ⅰ String 类提供了许多用来处理字符串的方法,例如,获取字符串长度.对字符串进行截取.将字符串转换为大写或小写.字符串分割等,下面我们就来领略它的强大之 ...

  5. [USACO 2012 Jan Silver] Bale Share【DP】

    传送门:http://www.usaco.org/index.php?page=viewproblem2&cpid=107 没想到太不应该了,真的不应该啊! f[i][j][k]表示前i个包, ...

  6. 贪心+枚举/哈希表 HDOJ Trouble

    题目传送门 题意:5个集合,每个集合最多200个数字,问是否每个集合挑一个数加起来和为0. 分析:显然n^5的程序果断超时,甚至n^3logn的二分也过不了.想n^3的方法,既然判断有没有,那么可以将 ...

  7. ACM_平面、空间分割问题（递推dp）

    折线分割平面 Time Limit: 2000/1000ms (Java/Others) Problem Description: 我们看到过很多直线分割平面的题目,今天的这个题目稍微有些变化,我们要 ...

  8. bootstrap基本布局

    中文API bootstrap.cn   HTML5文档 类型   移动设备优先 width 属性控制设备的宽度.设置为 device-width 确保它能正确呈现在不同设备上. initial-sc ...

  9. 微信小程序组件解读和分析：十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

  10. 输入域名网站访问不了，ping与ftp都正常，这情况有可能域名被墙

    被墙的风险 1.首先域名没有备案,而且服务器是国外的服务器, 2.域名解析到国外服务器 总结:以上两点有很大几率被墙的风险 被墙的解决方案: 1.换新域名并备案(不换新域名走第二步,域名一定要备案) ...