由于在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. win10下的jdk1.8安装

    1 下载jdk 下一步就好 默认C盘最好 不要又中文  http://pan.baidu.com/s/1eSwvFA6(这里面有两个jdk 32位 64位) 看图 CLASSPATH: .;%JAVA ...

  2. java web课程设计截图和服务器地址

    企业办公测试截图和服务器地址 本篇博客主要围绕以下几个部分展开,登录.系统管理.工作流.个人事务管理.内部邮件.公共信息共六个部分.主要有界面截图和简要介绍. 一.登录.更改密码界面 登录界面包括以管 ...

  3. ssh 公钥登录远程主机

    ssh-keygen 然后一路回车就可以了 ssh-copy-id user@host user代表用户名,host代表主机地址 然后根据提示输入远程主机的密码,成功,再登录就不用输入密码了

  4. 11.Flask-钩子函数

    在Flask中钩子函数是使用特定的装饰器的函数.为什么叫做钩子函数呢,是因为钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码,那么这种函数就叫做钩子函数. before_first_requ ...

  5. Python从网页上爬取图片

    在搜索壁纸的时候,想把壁纸保存到本地,一张一张的保存太过麻烦,所以想到用Python来爬取壁纸. 设计思路: 1.首先先去找有壁纸的网页: http://www.acfun.cn/a/ac334521 ...

  6. _bzoj2049 [Sdoi2008]Cave 洞穴勘测【LCT】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2049 裸的LCT,保存LCT模版.说一下出bug的几个地方叭: ①,rotate时,没有判断 ...

  7. Guilty Prince LightOJ - 1012

    Guilty Prince LightOJ - 1012 #include<cstdio> #include<cstring> ][]; int ans,h,w,T,TT; ] ...

  8. 构造 Codeforces Round #310 (Div. 2) B. Case of Fake Numbers

    题目传送门 /* 题意:n个数字转盘,刚开始每个转盘指向一个数字(0~n-1,逆时针排序),然后每一次转动,奇数的+1,偶数的-1,问多少次使第i个数字转盘指向i-1 构造:先求出使第1个指向0要多少 ...

  9. AJPFX讲解java单例模式

    单例设计模式概述:      单例模式就是要确保类在内存中只有一个对象,该实例必须自动创建,并且对外提供单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. 3 ...

  10. CF949A/950C Zebras

    思路: 贪心乱搞. 实现: #include <bits/stdc++.h> using namespace std; vector<vector<int>> v; ...