一、 媒体查询、

@media screen and (device-width:375px) and (device-height:812px){
#header {
height: 88px;
padding-top: 44px !important;
}
.mui-content {
padding-top: 88px !important;
}
}

二、iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,

<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">

三、测试中发现如果页面内容不够多的时候。底部会有白色的间距,测试为44px,这需要设置页面的高度加44,应该是ios11的bug。

$(".mui-content").css("height",(window.innerHeight+44)+"px");

关于H5移动端开发 iPhone X适配的更多相关文章

  1. h5移动端flexible源码适配终端解读以及常用sass函数

    ;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.docu ...

  2. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  3. H5 移动端开发中 ios/安卓坑 和经验总结

    1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...

  4. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  5. H5移动端开发vue+vux

    项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue             渐进式 JavaScript 框架   http://cn.vuejs.org/v2/guide/2: ...

  6. H5移动端开发

    开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...

  7. H5移动端开发遇见的东西

    常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...

  8. 整理几个经常在H5移动端开发遇到的东西。

    本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...

  9. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

随机推荐

  1. OSI参考模型(转)

    一.OSI参考模型 自下而上:物理层(物理介质,比特流).数据链路层(网卡.交换机).网络层(IP协议).传输层(TCP/UDP协议).会话层(创建/建立/断开连接).表示层(翻译,编码,压缩,加密) ...

  2. 操作符重载(day07)

    二十 操作符重载 eg:复数x+yi +4i (+2i) + (+4i) = +6i 双目操作符(L # R) 1.1 运算类的双目操作符:+ - * / -->左右操作数可以是左值也可以是右值 ...

  3. 30.es增删改内部分发原理

    当客户端发送一次请求时,大致会经过以下几个步骤     (1)客户端发送一个请求过去,es的一个node接收到这个请求(随机的),这个node就被es内部分配成coordinating node(协调 ...

  4. HTML <area> 对象

    <area>对象的属性 属性 描述 W3C alt 设置或返回当浏览器无法显示某个区域时的替换文字. Yes coords 设置或返回图像映射中可点击区域的坐标. Yes hash 设置或 ...

  5. 10.Spring注解+MyBatis+Servlet

    1.创建sql脚本 create table account ( id ) unsigned not null auto_increment primary key, account_number ) ...

  6. 【ABCD组】Scrum meeting 5

    前言 第5次会议在6月17日由组长在教9 405召开. 主要对下一步的工作进行说明安排,时长90min. 主要内容 分配下阶段任务,争取在这阶段完成软件的设计阶段 任务分配 姓名 当前阶段任务 贡献时 ...

  7. Bootstrap关于表单控件(按扭)

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

  8. 大红数星星 图论 XD网络赛

    问题 A: 大红数星星 时间限制: 3 Sec  内存限制: 128 MB提交: 1066  解决: 67[提交][状态][讨论版] 题目描述 “三角形十分的美丽,相信大家小学就学过三角形具有稳定性, ...

  9. J - Assign the task

    J - Assign the task HDU - 3974 思路:一眼秒思路<(* ̄▽ ̄*)/ dfs序+线段树. 通过dfs序把树上问题转化成线段上的问题.然后用线段树解决.    错因:都 ...

  10. UVa Problem 10051

    这题有点类似LIS,由于颜色最多100种,所以只需建立一个100的数组,按对立面的关系以某种颜色为向上面的最大值就可以了.   #include <iostream> #include & ...