【干货】移动端基础知识技巧总结
2018-06-24 01:36:27来源：未知 阅读 ()
上个周周末，接手了一个移动端的(外包)小项目，一直着手于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=””><!-- 给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();//取消事件的默认动作(如果存在这样的动作)
}
好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：es6入门
- 【教程干货】前端学习网站资源 2020-05-12
- Web前端必备：JavaScript基础知识梳理 2020-04-07
- 取消a标签在移动端点击时的背景颜色 2020-03-19
- css3系列-1.css基础知识入门 2020-03-18
- 前端HTML基础知识学什么？ 2020-03-18
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
