建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金:ConardLi)

这里针对这篇文章提几个建议而已:

1. 使用 pt 单位, pt:磅,相信用过 word 编辑文档,尤其做论文时应该深有体会吧,而且打印机也是用的 pt 做单位先将文件转换成 pt 单位的尺寸后再打印的,纵然有一定的历史原因,但是如果你用像素来打印显然没有 pt 的清楚,所有编辑文档一般要求使用 pt(磅)做单位,便于打印更清晰。

pt 和像素的换算为 3:4,我们只需要将设计稿的尺寸按照 px(像素) 进行换算成 pt 即可。

使用 百分比、vw、vh 进行布局,pt 进行元素设置,什么 border 1px、border-radius、字体模糊(较新的手机基本不会),图片大小啊统统解决。兼容性也不用怀疑,pt 是 CSS2.0 的标准规范。(下面图片截取自 MDN)。

2. 移动端如果在 webView 中的页面的话,部分版本的 webview 上页面超出部分会将 webview 撑开,即使你使用了  overflow: hidden; 。

3. IOS 上不支持 last-child 的选择器,以及部分webview上 nth-last-child 貌似也不支持, 如有必要得通过 js 去进行最后一个子元素的设置。

4. 图片依然应该准备多套,用于不同的像素比的设备,但是建议至少是 2x 比例的,因为现在没有多少 1 倍像素比的手机,存储图片是应当考虑到像素比的问题存储至少 2x、3x、4x 的几个比例。

5. 动画使用 svga 格式,但是应减少同屏中使用的数量,因为 svga 对性能消耗比非压缩资源高。svga 虽然好,如果对动画质量要求非常高,应该 lottie 动画(让原生去做)或者原生嵌入动画视频并将其转换成服务地址形式供你调用。

6. 如果对于屏幕横屏有需求但不切换布局的,如果使用 vh 或 vw 可能导致内容大小突变,建议改成 vmin 或 vmax。但是一定要注意 vmin 和 vmax 的具体场景的值,建议设置好  html { height: 100%; }  即可。

7. 针对于 刘海屏、美人尖、潜望镜等屏幕的适配,上面文章提到了 iphone 怎么设置,但是 Android 没有提供,只能自己去设置了。

以下为其他方面的总结:

1. 移动web页面如何禁用客户端的自带的下拉刷新

document.addEventLisener('touchmove', (e) => {
e.preventDefault();
}, false)

 

2. 移动端浏览器隐藏地址栏方案

  • 使用 meta 标签,但是往往一滚动页面或者跳转就会原形毕露,需要配合 better-scroll 加上document 上 preventDefault 掉 touchmove 事件使用。
  • 实用 window.scrollTo(0, 1) 方案,只能解决页面初始时的地址栏隐藏并且页面自然滚动的页面,如果不在乎后续出现地址栏可以使用,简单粗暴,但是得确保 body 高度超过可视区域高度。
  • pwa,但是用户基本不会去添加的,效果最好,但是最不推荐的方案。

移动端 h5 适配之必知必会的更多相关文章

  1. H5系列之History(必知必会)

    H5系列之History(必知必会)   目录 概念 兼容性 属性 方法 H5方法       概念     理解History Api的使用方式 目的是为了解决哪些问题   作用:ajax获取数据时 ...

  2. H5系列之地理位置(必知必会)

    H5之地理位置必知必会     [02]概念   规范地址:http://www.w3.org/TR/geolocation-API/     HTML5 Geolocation(地理定位)用于定位用 ...

  3. 迈向高阶:优秀Android程序员必知必会的网络基础

    1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...

  4. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

  5. [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

    http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...

  6. Android必知必会-使用okhttp的PUT方式上传文件

    注:如果移动端排版有问题,请看 简书版 (<-点击左边),希望CSDN能更好的支持移动端. 背景 公司的文件上传接口使用PUT协议,之前一直用的都是老项目中的上传类,现在项目中使用了okhttp ...

  7. 关于TCP/IP,必知必会的十个经典问题[转]

    关于TCP/IP,必知必会的十个问题 原创 2018-01-25 Ruheng 技术特工队   本文整理了一些TCP/IP协议簇中需要必知必会的十大问题,既是面试高频问题,又是程序员必备基础素养. 一 ...

  8. Android程序员必知必会的网络通信传输层协议——UDP和TCP

    1.点评 互联网发展至今已经高度发达,而对于互联网应用(尤其即时通讯技术这一块)的开发者来说,网络编程是基础中的基础,只有更好地理解相关基础知识,对于应用层的开发才能做到游刃有余. 对于Android ...

  9. 《MySQL必知必会》整理

    目录 第1章 了解数据库 1.1 数据库基础 1.1.1 什么是数据库 1.1.2 表 1.1.3 列和数据类型 1.1.4 行 1.1.5 主键 1.2 什么是SQL 第2章 MySQL简介 2.1 ...

  10. 脑残式网络编程入门(三):HTTP协议必知必会的一些知识

    本文原作者:“竹千代”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.前言 无论是即时通讯应用还是传统的信息系统,Http协议都是我们最常打交 ...

随机推荐

  1. Mysql启动报错 The server quit without updating PID

    [root@db mysql]# service mysql restartMySQL server PID file could not be found![失败]Starting MySQL... ...

  2. C++入门经典-例6.4-输出字符数组中的内容

    1:代码如下: // 6.4.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  3. 【Spark机器学习速成宝典】基础篇04数据类型(Python版)

    目录 Vector LabeledPoint Matrix 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策树 Python代码(sk ...

  4. spark streaming 1: SparkContex

    StreamingContext 和SparkContex的用途是差不多的,作为spark stream的入口,提供配置.生成DStream等功能. 总体来看,spark stream包括如下模块: ...

  5. Emacs常用命令快速参考

    原文地址 Emacs常用命令的汇总,来自Emacs参考卡片 注意:以下命令中标注的按键,大写的C代表Control,在键盘上通常是Ctrl键,而M代表Meta,在键盘上通常是Alt键,S则代表Shif ...

  6. Python_List对象内置方法详解

    目录 目录 前言 软件环境 列表List 修改列表的元素 插入列表元素 extend 将序列中的元素迭代的附加到list中 insert 在指定的索引号中插入一个元素 删除列表元素 del 删除Lis ...

  7. 阶段3 1.Mybatis_12.Mybatis注解开发_8 mybatis注解开发使用二级缓存

    执行两次都查询userId为57的数据.测试一级缓存 返回true 新建测试类 ,测试二级缓存 二级缓存的配置 首先是全局配置,不配置其实也是可以的.默认就是开启的.这里为了演示配置上 dao类里面进 ...

  8. Centos下使用subversion

    Centos下使用subversion 1.安装 yum install subversion 2.创建版本库 a.mkdir -p /var/svn/repositories(创建版本库目录) b. ...

  9. linux计划crontab

    linux计划crontab 启动crontab服务 一般启动服务用  /sbin/service crond start 若是根用户的cron服务可以用 sudo service crond sta ...

  10. C++笔记——类(0)定义、访问控制、友元、default、mutable、构造函数

    整理一下一些关于类的知识点,毕竟还是很经常用的(先总结一部分,太多了). 定义格式.访问控制 C++里面定义类的关键词有两个,一个是class,另一个是struct,他们基本没有区别,除了成员变量的默 ...