一、 媒体查询、

@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. [Ynoi2015]即便看不到未来

    题目大意: 给定一个序列,每次询问,给出一个区间$[l,r]$. 设将区间内的元素去重后重排的数组为$p$,求$p$中长度为$1\sim 10$的极长值域连续段个数. 长度为$L$的极长值域连续段的定 ...

  2. [USACO5.5]隐藏口令Hidden Password [最小表示法模板]

    最小表示法就是一个字符串构成一个环,找以哪个点为开头字典序最小. 然后我们就可以用n2的算法愉快的做啦~实际上有O(n)的做法的,就是用两个指针扫,如果这两个位置的字典序相等,就一起往后,如果某一个大 ...

  3. SQL中IS NOT NULL与!=NULL的区别

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  4. 亚马逊免费服务器搭建Discuz!论坛过程(三)

    参考文章:http://faq.comsenz.com/library/system/env/env_linux.htm 参考但是不要完全按照上述文章,不然很可能出错. 尤其不要init 6 重启,我 ...

  5. 了解CSS overflow属性 标签: htmlcss属性 2016-12-31 14:38 75人阅读 评论(1)

    overflow属性规定当内容溢出元素框时如何显示. 例:div { width:150px; height:150px; overflow:scroll; } 可能的值有: 值           ...

  6. CSS max-width: 0;

    写CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先 ...

  7. BZOJ 1396 识别子串 (后缀自动机、线段树)

    手动博客搬家: 本文发表于20181221 00:58:26, 原地址https://blog.csdn.net/suncongbo/article/details/85150962 嗯,以后博客内容 ...

  8. netty自定义协议 心跳 断线重连源码

    https://github.com/aa1356889/NettyHeartbeat

  9. tcpip学习

    http://www.cnblogs.com/ggjucheng/archive/2012/08/18/2645324.html

  10. POJ 1654

    不知 是怎么看出的精度不够,吸经验吧. #include <iostream> #include <cstdio> #include <cstring> #incl ...