Meta标签：

这个想必大家都知道，当页面在手机上显示时，添加这个meta能够让页面强制让文档的宽度与设备的宽度保持1:1。并且文档最大的宽度比例是1.0，且不同意用户点击屏幕放大浏览。

这两个属性分别对ios上自己主动识别电话和android上自己主动识别邮箱做了限制。

获取滚动栏的值：

window.scrollY  window.scrollX

桌面浏览器中想要获取滚动栏的值是通过document.scrollTop和document.scrollLeft得到的。但在iOS中你会发现这两个属性是没有定义的，为什么呢？因为在iOS中没有滚动栏的概念，在Android中通过这两个属性能够正常获取到滚动栏的值。那么在iOS中我们该怎样获取滚动栏的值呢？就是上面两个属性，可是事实证明android也支持这属性，所以索性都用woindow.scroll.

禁止选择文本：

-webkit-user-select:none

禁止用户选择文本，ios和android都支持

屏蔽阴影：

-webkit-appearance:none

亲測。能够同一时候屏蔽输入框怪异的内阴影。解决iOS下无法改动button样式，測试还发现一个小问题就是。加了上面的属性后，iOS下默认还是带有圆角的，只是能够使用 border-radius属性改动。

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的边框。怎么办？这样编写代码必定导致出现横向滚动栏，肿么办？要相信问题就是用来解决的。

这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的详细解释不做赘述（想深入了解的同学能够到w3school查看，要知道自己动手会更easy记忆）。让我们看看怎样解决上面的问题：

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表示须要显示几行。

Retina屏幕高清图片：

selector {  background-image: url(no-image-set.png);  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;}

image-set的语法，相似于不同的文本，图像也会显示成不同的：

不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下。他们解析background-image中的背景图像。

支持image-set：假设你的浏览器支持image-sete。并且是普通显屏下。此时浏览器会选择image-set中的@1x背景图像；

Retina屏幕下的image-set：假设你的浏览器支持image-set。并且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

html5重力感应事件：

if (window.DeviceMotionEvent) {                  window.addEventListener('devicemotion',deviceMotionHandler, false);          }         var speed = 30;//speed        var x = y = z = lastX = lastY = lastZ = 0;        function deviceMotionHandler(eventData) {
                  var acceleration =event.accelerationIncludingGravity;                x = acceleration.x;                y = acceleration.y;                z = acceleration.z;                if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {                    //简单的摇一摇触发代码                    alert(1);                }                lastX = x;                lastY = y;                lastZ = z;        }

关于deviceMotionEvent是HTML5新增的事件，用来检測手机重力感应效果详细可參考

移动端touch事件：

touchstart //当手指接触屏幕时触发

touchmove //当已经接触屏幕的手指開始移动后触发

touchend //当手指离开屏幕时触发

touchcancel//当某种touch事件非正常结束时触发

这4个事件的触发顺序为：

touchstart -> touchmove -> touchend ->touchcancel

对于某些android系统touch的bug:

比方手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart 。非常多次 touchmove ，和终于的 touchend ，可是在android 4.0上，touchmove仅仅被触发一次，触发时间和touchstart 差点儿相同，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个非常蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现。当时解决的方法就是用settimeout来稀释touchmove。

单击延迟：

click 事件因为要等待双击确认，会有 300ms 的延迟，体验并非非常好。

开发人员大多数会使用封装的 tap 事件来取代click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 推断 + touchend 事件封装组成。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

IOS里面fixed的文本框焦点居中

        input {       position:fixed;       top:0;left:0;    }                
      
            
       
                
        Testfield:             
       
        
      
    

在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不參与滚动，仅仅让其以下滚动。

position:sticky

position:sticky是一个新的css3属性，它的表现相似position:relative和position:fixed的合体，在目标区域在屏幕中可见时。它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

.sticky { position: -webkit-sticky; position:sticky; top: 15px; }

浏览器兼容性：

因为这是一个全新的属性。以至于到如今都没有一个规范，W3C也刚刚開始讨论它。而如今仅仅有webkit nightly版本号和chrome 开发版(Chrome 23.0.1247.0+ Canary)才開始支持它。

另外须要注意的是。假设同一时候定义了left和right值，那么left生效，right会无效。相同，同一时候定义了top和bottom，top赢～～

移动端点透事件

简单的说，因为在移动端我们常常会使用tap(touchstart)事件来替换掉click事件。那么就会有一种场景是：

      
www.qq.com

div是绝对定位的蒙层z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：

$('#mengceng').on('tap',function(){
      $('#mengceng').hide();});

我们点击蒙层时 div正常消失，可是当我们在a标签上点击蒙层时，发现a链接被触发。这就是所谓的点透事件。

原因：

touchstart 早于 touchend 早于 click。

亦即click的触发是有延迟的，这个时间大概在300ms左右。也就是说我们tap触发之后蒙层隐藏，此时click还没有触发。300ms之后因为蒙层隐藏。我们的click触发到了以下的a链接上。

解决的方法：

1 尽量都使用touch事件来替换click事件。

2 阻止a链接的click的preventDefault

base64编码图片替换url图片

u在移动端。网络请求是非常珍贵的资源，尤其在2g或者3g网络下，所以能不发请求的资源都尽量不要发，对于一些小图片icon之类的。能够将图片用base64编码，来降低网络请求。

手机拍照和上传图片

动画效果时开启硬件加速

我们在制作动画效果时常常会想要改版元素的top或者left来让元素动起来，在pc端还好可是移动端就会有较大的卡顿感。这么我们须要使用css3的 transform: translate3d;来替换，

此效果能够让浏览器开启gpu加速，渲染更流畅。可是笔着实验时在ios上体验良好，但在一些低端android机型可能会出现意想不到的效果。

高速回弹滚动

在iOS上假设你想让一个元素拥有像 Native 的滚动效果。你能够这样做：

.div {        overflow: auto;        -webkit-overflow-scrolling: touch;    }

经笔着測试，此效果在不同的ios系统表现不一致，

对于局部滚动，ios8以上，不加此效果，滚动的超级慢，ios8一下，不加此效果。滚动还算比較流畅

对于body滚动，ios8以上，不加此效果相同拥有弹性滚动效果。

持续更新中。

。