【干货】移动端基础知识技巧总结 - 丿Kiss丶小波_H5之家

　　上个周周末，接手了一个移动端的(外包)小项目，一直着手于PC端，对移动端还是一知半解，所以这也是我的一个挑战，因此，今天心血来潮，总结一些移动端的基础知识和技巧供自己以后方便查阅，欢迎大家补充或转载：

　　一.单位(px,em,rem)

　　1.px：屏幕设备物理上能显示出的最小的一个点，不同设备上点的长宽，比例不一定相同；

　　rem单位在移动端前端开发很流行。rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小，但是，你用过了就知道，它会出现一个问题：用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。

　　之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px；因此，我们在html中通常做了如下设置：

html{ font-size:}

　　但是呢，Chrome浏览器有时候会忽略了html的设置，于是在初始化页面的时候，出现了上面字体过大的情况。仔细研究会发现，出现字体过大的“元素”，通常是没有设置font-size的，元素的font-size是继承根目录的，因此，解决方案为：在你要展现的文字父级或者其本身设置font-size；

　　二.头部信息：

　　1.DOCTYPE(Docment Type)：此标签告知浏览器文档使用哪种html或者 xhtml 规范，不区分大小写，HTML代码：

　　2.lang：此属性放在<html>标签中用于设置文档的语言类型(英语:en；中文:zh等)，HTML代码：

...

　　3.charser：声明文档使用的字符编码(GBK，UTF-8)，HTML代码：

　 4.format-detection(识别规则)→content参数(默认都是yes)：

　　　　telephone：数字转化为拨号链接(yes/no)——no：禁止把数字转化为拨号链接，yes：开启把数字转化为拨号链接；

　　　　email：识别邮箱(yes/no)——no：禁止作为邮箱地址，yes：开启把文字默认为邮箱地址；

　　　　adress：点击地址跳转至地图——no：禁止跳转至地图，yes：开启点击地址跳转至地图的功能；

　　5.viewport(针对移动设备) →content 参数：

　　6.SEO优化：

　　　　title(页面标题)：your title

　　　　robots(网页搜索引擎索引方式)：robotterms是一组使用逗号(,)分割的值，通常取值：

　　　　　　none：搜索引擎将忽略此网页，等同于noindex，nofollow；

　　　　　　noindex：搜索引擎不索引此网页；nofollow：搜索引擎不继续通过此网页的链接索引搜索其它的网页；

　　　　　　index：搜索引擎索引此网页；follow：搜索引擎继续通过此网页的链接索引搜索其它的网页；

　　三.移动端开发常见兼容性：
　　1.H5页面窗口自动调整到设备宽度，禁止用户缩放

　　　2.忽略将页面中的数字识别为电话号码(ios设备容易出现)

　　　3.忽略页面中对邮箱地址的识别(android设备容易出现)

　　　4.上下拉动滚动条时卡顿

body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch; }　

　　　5. 禁止复制，选中文本

body{ -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }

　　　6.长时间按住页面出现闪退

html{ -webkit-touch-callout:none; }

　　　7. IOS/Android触摸元素时出现半透明灰色遮罩

html{ -webkit-tab-highlight-color:rgba(255,255,255,0); }

　　　8. 伪类 :active失效

　　　　方法一：

　　　　方法二：js给document绑定 touchstart 或 touchend 事件 document.addEventListener(‘touchstart’,function(){},false);

　　　9. 降级处理(CSS3)

if('transition' in document.documentElement.style){ console.log(‘支持transitioin’); }else{//这里进行降级处理，调用不同的CSS console.log(‘不支持transition’); }

　　　10.旋转屏幕时，调整字体大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{ -webkit-text-size-adjust:100%; }

　　　11.某些Android圆角失效

background-clip:padding-box;

　　　12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)

document.getElementById('inputId').addEventListener('input',function(e){ value = e.target.value; console.log(value); });

　　　13.消除IE里面那个叉号

input:-ms-clear{ display:none; }

　　　14. IOS设备上输入框默认内阴影

html{ -webkit-appearance:none; }

　　　15.IOS设置input按钮样式会被默认样式覆盖

input,textarea{ border:0; -webkit-appearance:none; }

　　　16. IOS键盘字母输入，默认首字母大写

　　　17. input 类型设置为 number 的问题：

　　　　17-1.maxlength属性用不了：

function checkLength(obj,length){ if(obj.value.length > length){ 　　obj.value = obj.value.substr(0,length); } }

　　　　17-3.去除input默认样式