挪动web开辟题目和经验总结

媒介

这里大部份是本身碰到过的状况，另有一部份自创了偕行的文章，假如人人有碰到别的坑，迎接提出来一同研讨。

学问要点

1. Meta标签

• 1.制止用户缩放页面，页面强迫让文档的宽度与装备的宽度坚持1:1

• 2.制止ios上自动识别电话

• 3.制止android上自动识别邮箱

• 4.针对ios上的safari上地点栏和顶端款式条的

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. 打电话发短信

打电话给:020-88888888
发短信给: 911

4. 图片优化

• 1.base64编码图片替代url图片;
• 2.图片紧缩，供应一个网站用于紧缩;
• 3.图片懒加载；

• 4.img和background

  • img：html中的标签img是网页构造的一部份会在加载构造的历程中和其他标签一同加载；
  • background：以css背景图存在的图片background会比及构造加载完成（网页的内容悉数显现今后）才最先加载；

so，网页会先加载标签img的内容，再加载背景图片background援用的图片


5. H5制止手机屏幕横屏的变相操纵

挪动装备上的页面，当屏幕扭转的时刻会有一个orientationchange事宜，能够给body元素增添此事宜的监听：

进入监听要领中，经由过程window。orientation来猎取当前屏幕的状况：

• 0 &＃8212; 竖屏
• 90 &＃8212; 逆时针扭转横屏
• -90 &＃8212; 顺时针扭转横屏
• 180 &＃8212; 竖屏，上下颠倒

处理要领：

• 1.你能够在装备扭转时候监听里面临body运用CSS3里面的transition中的扭转来坚持页面竖向；
• 2.此要领只适用于安卓手机

技能与必知

1. 原生js的事宜监听和jquery的事宜绑定在ios中失效：

运用事宜监听或事宜绑定时，由于父元素挑选body或document元素，致使在ios中事宜触发无效，所以不运用body和document元素作为父级元素。

2. navigator.onLine兼容性题目，需谨慎运用；

3. ios中日期显现为NaN：

Date的日期花样，在ios中有兼容性题目，ios的日期会显现成：NaN;

处理要领：在ios中支撑&＃8221;2017/12/26 19:36:00&＃8243;，而不支撑&＃8221;2017-12-26 19:36:00&＃8243;花样，背面一种花样，在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

1. zepto的scroll事宜默许绑在window上的
2. app抓包
3. 阅读器衔接安卓机测试

有用网站

1. flexible适配
2. 测试兼容性网站
3. 前端开辟
4. 雅虎36条优化原则