移动端基础知识技巧总结

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

　　一.单位(px,em,rem)

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

　　2.em/rem：相同点：都是一个相对大小的值；不同点：em是相对父级元素，rem是相对html(默认值视浏览器而定，Chrome的默认为16px)；

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

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

html{
    font-size:62.5%;/*10÷16×100=62.5%   1rem=10px*/
}

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

　　二.头部信息：

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

<!DOCTYPE html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

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

<html lang="en">
...
</html>

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

<meta charset ="UTF-8">

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

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

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

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

<meta name="format-detection" content="telephone=no,email=no ,,adress=no"/>

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

　　　　width：viewport宽度；height：viewport 高度(通常可以不设置)；initial-scale：初始缩放比例；maximum-scale：最大缩放比例；minimum-scale：最小缩放比例；user-scalable：是否允许缩放(yes/no)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

　　6.SEO优化：

　　　　title(页面标题)：<title>your title</title>

　　　　keywords(页面关键词)：<meta name="keywords" content="your keywords"/>

　　　　description(页面描述)：<meta name="description" content="your description"/>

　　　　author(网页作者)：<meta name="author" content="author name"/>

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

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

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

　　　　　　all：搜索引擎将索引此网页与继续通过此网页的链接索引，等同于index，follow；

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

<meta name="robots" content="index,follow"/>
<!-- ps：如果网页没有提供robots，搜索引擎认为网页的robots属性为all(index和follow -->

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=no"/>

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

<meta name="format-detection" content="telephone=no"/>

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

<meta name="format-detection" content="email=no"/>

　　　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失效

方法一：<body ontouchstart=””>

　　　　方法二：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){
    var e = e || event;// 浏览器兼容性处理
    var 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键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off"/>

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

　　　　17-1.maxlength属性用不了：<input type="number" oninput="checkLength(this,5)"/>

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

　　　　17-2.设置step(默认为1)：<input type="number" step="0.01"/>

　　　　17-3.去除input默认样式

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

　　四.移动端事件(click点透)：

　　1.事件的变化：

　　　　① PC端的鼠标事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave

　　　　② 几个原始事件取代click点击事件(移动端click事件也存在，但会有一个200ms~300ms的触发延时问题)：

　　　　　　touchstart→触控开始时触发，类似于mousedown

　　　　　　touchmove→触控点在屏幕上移动时触发，类似于mousemove

　　　　　　　　在移动设备上，触控点从一个元素移动到另一个元素上时，不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件

　　　　　　touchend→触控结束时触发，类似于mouseup

　　　　　　touchcancel→更高级别的事情发生时触发，比如在游戏中突然来电话，就会触发touchcancel事件，并且在touchcancel时保存当前游戏的状态信息

　　　　③ PC端一台机器只有一个鼠标，与鼠标相关的属性都放到了一个event对象上；

　　　　　移动端设备大多支持多点触控，一个事件可能与多个触控点相关，每个触控点都需要记录自己单独的属性，与touch相关的属性都是TouchList类型，触控位置、目标元素，全部放到了touch对象上；

　　　　　 touches→当前屏幕的手指列表；changedTouches→触发当前事件的手指列表；targetTouches→当前元素上的手指列表；

　　　　　touch对象主要属性：

　　　　　　clientX / clientY→触控点相对浏览器窗口的位置；pageX / pageY→触控点相对页面的位置；screenX / screenY→触控点相对屏幕的位置；

　　　　　　identifier→touch对象的ID；target→当前的DOM元素，该属性是触控事件最先发生的元素

　　　2.click点透事件：

　　　　① 什么是click点透：举个例子，现有A(上)、B(下)两个盒子重叠排列，盒子A有绑定touchend事件，事件处理为隐藏盒子A，盒子B有绑定click事件，此时点击盒子A一次，也会触发到盒子B的click事件

　　　　② 点透出现的场景：A / B两个元素层上下Z轴重叠，上层的A元素点击后消失或移开，下层的B元素有默认的click事件(如a标签)，或 B元素绑定了click事件

　　　　③ 为什么会出现点透：移动端click事件有明显的延迟，touchstart和click的区别：

　　　　　　touchstart：这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发；

　　　　　　click：这个DOM(或冒泡到这个DOM)上手指触摸开始，且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值)，

　　　　　　　　　且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间，也会触发click)才能触发；

　　　　④ 如何解决：

　　　　　　对于B元素本身没有默认click事件的情况，应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件；

　　　　　　对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件，从而阻止click事件的产生，即应在 touch函数中取消事件的默认动作：

if(e.type == "touchend"){
    e.preventDefault();//取消事件的默认动作(如果存在这样的动作)
}

　　好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！

posted @ 2017-07-13 09:58 TigerZhang 阅读(242) 评论(0) 编辑收藏举报

刷新页面返回顶部

TigerZhang

移动端基础知识技巧总结

公告