关于H5移动端开发 iPhone X适配
一、 媒体查询、
@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适配的更多相关文章
- h5移动端flexible源码适配终端解读以及常用sass函数
;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.docu ...
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5 移动端开发中 ios/安卓坑 和经验总结
1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- H5移动端开发vue+vux
项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue 渐进式 JavaScript 框架 http://cn.vuejs.org/v2/guide/2: ...
- H5移动端开发
开发前准备 环境: Node.js LTS版本 git 最新版 文档: 本项目技术栈基于 ES2016 VueJS vux 快速开始 1.克隆项目 git clone https://gitee.co ...
- H5移动端开发遇见的东西
常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...
- 整理几个经常在H5移动端开发遇到的东西。
本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
随机推荐
- 【udacity】机器学习-神经网络
Evernote Export 1.神经网络 神经元 细胞的主体称为细胞体,然后有轴突.突触 他们构建的方式是可以调整的 我们会有一些输入的放电信号视为放电频率或输入的强度 X1w1X2w2X ...
- 关于MySQL Server影响ASP.NET网站使用的问题:未能加载文件或程序集MySql.Web.v20
最近开发的ASP.NET MVC 4网站,之前头头说如果遇到装过MySQL的机器就绕着走,还觉得奇怪 嘛,该来的迟早都会来 于是撞上了一台 启动网站再访问,总是出错,提示“未能加载文件或程序集”,名字 ...
- eoLinker GoKu Gateway 开源版 V2.1发布,加入UI管理系统等
GoKu API Gateway 是eoLinker旗下的开源版接口网关,支持OpenAPI与微服务管理,支持私有云部署,实现API转发.请求参数转换.数据校验等功能,提供图形化界面管理,能够快速管理 ...
- python 遍历xml所有节点
1.xml文件 2.代码 #coding:utf-8 import xml import xml.etree.ElementTree as ET """ 实现从xml文件 ...
- LA 3938
After doing Ray a great favor to collect sticks for Ray, Poor Neal becomes very hungry. In return fo ...
- 系统和帮助-Linux基础知识
iOS镜像: 硬盘分区:留出一些空间;实在不成,可安装完成以后,新增一块虚拟硬盘; 终端:terminal 用户界面: GUI:图形界面 GNome KDE CLI: bash,zsh,sh,csh, ...
- Python中的特殊方法:__call__
本文结构: 1.__call__方法 2.callable():判断对象/函数能否被调用 3.举例:斐波那契数列类 1.__call__方法 一个对象实例可以有自己的属性和方法,当我们调用实例方法时, ...
- VIM 使用 匹配替换命令配合表达式 实现 递增替换
:let n=100 | g/while/s/\d/\=n / | let n=n+1 before 10 void *thread_function_1(void *arg) { 11 int i; ...
- (17)Spring Boot普通类调用bean【从零开始学Spring Boot】
我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,想直接使用 ...
- VNC ( Virtual Network Computing )
VNC is used to display an X windows session running on another computer. Unlike a remote X connectio ...