1.Meta标签：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
当页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。
2.获取滚动条的值：
window.scrollY window.scrollX
pc端活动滚动条的值可以用document.scrollTop得到的，但是在ios上，这两个值是未定义的，因为ios没有滚动条的定义，在Android中通过这两个属性可以正常获取到滚动条的值。在ios上要用window.scrollY window.scrollX，Android也支持。
3.禁止选择文本：
-webkit-user-select:none
禁止用户选择文本，ios和android都支持
4.屏蔽阴影：
-webkit-appearance:none
亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。
5.css之border-box：
element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}
要一个元素100%显示，又必须有一个固定的padding-left／padding-right，还有1px的边框，怎么办？这样编写代码必然导致出现横向滚动条。这时就用到了border-box了。
6.css3多文本换行：
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Webkit支持一个名为-webkit-line-clamp的属性，参见链接，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。需要注意的是display需要设置成box，-webkit-line-clamp表示需要显示几行。
7.移动端touch事件：
- touchstart //当手指接触屏幕时触发
- touchmove //当已经接触屏幕的手指开始移动后触发
- touchend //当手指离开屏幕时触发
- touchcancel//当某种touch事件非正常结束时触发
这4个事件的触发顺序为：
touchstart -> touchmove -> touchend ->touchcancel
对于某些android系统touch的bug:
比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发解决办法就是用settimeout来稀释touchmove,或者可以用到zepto.js封装的方法。
8.单击延迟：
click 事件因为要等待双击确认，会有 300ms 的延迟，体验并不是很好。
开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
9.IOS里面fixed的文本框焦点居中：
<!DOCTYPE html>
<head>
input {
position:fixed;
top:0;left:0;
}
</head>
<body>
<div class="header">
<form action="">
<label>Testfield: <input type="text" /></label>
</form>
</div>
</body>
</html>
在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间
解决办法有两个：
可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$this.addClass('fixfixed');
})
.on('blur', 'input', function(e) {
$this.removeClass('fixfixed');
});
还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$absolute.show();
$this.hide();
})
.on('blur', 'input', function(e) {
$fixed.show();
$this.hide();
});
最后一种就是顶部的input不参与滚动，只让其下面滚动。
10.base64编码图片替换url图片
u在移动端，网络请求是很珍贵的资源，尤其在2g或者3g网络下，所以能不发请求的资源都尽量不要发，对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。
11.动画效果时开启硬件加速：
我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来，在pc端还好但是移动端就会有较大的卡顿感，这么我们需要使用css3的 transform: translate3d;来替换，
此效果可以让浏览器开启gpu加速，渲染更流畅，但是笔着实验时在ios上体验良好，但在一些低端android机型可能会出现意想不到的效果。
12.ios和android局部滚动时隐藏原生滚动条
android：
::-webkit-scrollbar{
opacity: 0;
}
ios：
使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
<div class="wrap">
<div class="box"></div>
</div>
12.设置placeholder时候 focus时候文字没有隐藏：
input:focus::-webkit-input-placeholder{
opacity: 0;
}
网友评论