媒介
这里大部份是本身碰到过的状况，另有一部份自创了偕行的文章，假如人人有碰到别的坑，迎接提出来一同研讨。
学问要点
1. Meta标签
- 1.制止用户缩放页面，页面强迫让文档的宽度与装备的宽度坚持1:1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />- 2.制止ios上自动识别电话
<meta content="telephone=no" name="format-detection" />- 3.制止android上自动识别邮箱
<meta content="email=no" name="format-detection" />- 4.针对ios上的safari上地点栏和顶端款式条的
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 听说在ios7以上版本就没结果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent 然则我都是用black-->2. JS和jquery猎取种种屏幕的宽度和高度的代码
// Javascript:
网页可见地区宽： document.body.clientWidth
网页可见地区高： document.body.clientHeight
网页可见地区宽： document.body.offsetWidth (包含边线的宽)
网页可见地区高： document.body.offsetHeight (包含边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部份上： window.screenTop
网页正文部份左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用事情区高度： window.screen.availHeight
屏幕可用事情区宽度： window.screen.availWidth
// Jquery：
$(document).ready(function(){
alert($(window).height()); //阅读器当前窗口可视地区高度
alert($(document).height()); //阅读器当前窗口文档的高度
alert($(document.body).height());//阅读器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//阅读器当前窗口文档body的总高度 包含border padding margin
alert($(window).width()); //阅读器当前窗口可视地区宽度
alert($(document).width());//阅读器当前窗口文档对象宽度
alert($(document.body).width());//阅读器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//阅读器当前窗口文档body的总宽度 包含border padding margin
})3. 打电话发短信
<a href="tel:020-88888888">打电话给:020-88888888</a>
<a href="sms:911">发短信给: 911</a>4. 图片优化
- 1.base64编码图片替代url图片;
- 2.图片紧缩，供应一个网站用于紧缩;
- 3.图片懒加载；
4.img和background
- img：html中的标签img是网页构造的一部份会在加载构造的历程中和其他标签一同加载；
- background：以css背景图存在的图片background会比及构造加载完成（网页的内容悉数显现今后）才最先加载；
so，网页会先加载标签img的内容，再加载背景图片background援用的图片
5. H5制止手机屏幕横屏的变相操纵
挪动装备上的页面，当屏幕扭转的时刻会有一个orientationchange事宜，能够给body元素增添此事宜的监听：
<body onOrientationchange="updateOrientation();"> 进入监听要领中，经由过程window。orientation来猎取当前屏幕的状况：
- 0 — 竖屏
- 90 — 逆时针扭转横屏
- -90 — 顺时针扭转横屏
- 180 — 竖屏，上下颠倒
处理要领：
- 1.你能够在装备扭转时候监听里面临body运用CSS3里面的transition中的扭转来坚持页面竖向；
- 2.此要领只适用于安卓手机
<!-- uc强迫竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强迫竖屏 -->
<meta name="x5-orientation" content="portrait">技能与必知
1. 原生js的事宜监听和jquery的事宜绑定在ios中失效：
运用事宜监听或事宜绑定时，由于父元素挑选body或document元素，致使在ios中事宜触发无效，所以不运用body和document元素作为父级元素。
2. navigator.onLine兼容性题目，需谨慎运用；
3. ios中日期显现为NaN：
Date的日期花样，在ios中有兼容性题目，ios的日期会显现成：NaN;
处理要领：在ios中支撑”2017/12/26 19:36:00″，而不支撑”2017-12-26 19:36:00″花样，背面一种花样，在ios中显现Nan （Android中都能够显现平常）
4. 挪动端1px的题目:
由于差别的手机有差别的像素密度,css中的1px并不等于挪动装备的1px。项目中运用js和rem做挪动端的屏幕适配，所以发生0.5px的状况，致使低版本的手机展现不了0.5px的边框。
处理要领：运用css处理1px的题目，而且给须要设置成1px的dom元素直接写上：border-width:1px;
5. 页面转动条题目：
web页面在PC阅读器上阅读时有转动条；然则，在挪动端阅读器翻开时，没有转动条
处理要领：将页面的最外层(我平常在写页面时，会在body标签内写一个大容器，用于寄存页面的内容)设置overflow:auto/scroll;而且不能设置height属性的值(height:100%也不可)
6. 长按闪退的题目:
列表页的列表项时(触摸到笔墨)，在低版本手机中会涌现闪退的状况
处理要领：
js部份：在事宜触发时增加e.preventDefault();，用于阻挠默许行动
css部份：增加制止文本文本复制的代码 -webkit-touch-callout: none; user-select: none;
7. ios中，除body外的部分转动，会涌现卡顿题目
处理方案：在要转动元素上加上
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;8. 在ios上，input默许款式和表单的disabled属性带来的重影款式
- 1.去掉input的默许款式
input,button,textarea{-webkit-appearance: none;}- 2.由于ios默许了disabled属性时透明度为0.8，处理：
input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }9. 慎用fixed规划
css中position: fixed定位会由于其父元素上能够设置了transform属性而失效。
微信端
1. 安卓在微信端不能运用window.location.reload()
处理要领：运用url地点后加随机数来处理
2. ios下的微信页面背景音乐没法自动播放题目
这个题目我有碰到过，然后网上了找了处理要领，然则没有结果，所以只能改用最先挪动播放音乐。
Other
- zepto的scroll事宜默许绑在window上的
- app抓包
- 阅读器衔接安卓机测试
