移动端开发技巧

摘要：通常我们再滑屏页面，会调用的可以阻止默认情况的发生阻止页面滚动当手指离开屏幕时触发系统停止跟踪触摸时候会触发。

1.添加到主屏后的标题（IOS）

</>复制代码 

2.启用 WebApp 全屏模式（IOS）

</>复制代码 
 
 

3.百度禁止转码。通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

</>复制代码 

4.设置状态栏的背景颜色（IOS）设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效

</>复制代码 
  
    default ：状态栏背景是白色。
    black ：状态栏背景是黑色。
    black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

5.开启短信功能：

</>复制代码 
 123456

6.移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

</>复制代码 
 

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

</>复制代码 
dooyoe@gmail.com

viewport模板

</>复制代码 
    
这里开始内容
    

1.ios 系统

</>复制代码 
    默认中文字体是Heiti SC
    默认英文字体是Helvetica
    默认数字字体是HelveticaNeue
    无微软雅黑字体        

2.android 系统

</>复制代码 
    默认中文字体是Droidsansfallback
    默认英文和数字字体是Droid Sans
    无微软雅黑字体

3.winphone 系统

</>复制代码 
    默认中文字体是Dengxian(方正等线体)
    默认英文和数字字体是Segoe
    无微软雅黑字体
    各个手机系统有自己的默认字体，且都不支持微软雅黑
    如无特殊需求，手机端无需定义中文字体，使用系统默认
    英文字体和数字字体可使用 Helvetica ，三种系统都支持        

移动端字体单位font-size选择px还是rem对于只需要适配手机设备，使用px即可对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备rem配置参考：

</>复制代码 
        html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}    

</>复制代码 
    当用户手指放在移动设备在屏幕上滑动会触发的touch事件
    以下支持webkit
    touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
    touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
    touchend——当手指离开屏幕时触发
    touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
    以下支持winphone 8
    MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
    MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
    MSPointerUp——当手指离开屏幕时触发

移动端click屏幕产生200-300 ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

</>复制代码 
    解决延迟方案：
    fastclick可以解决在手机上点击事件的300ms延迟
    zepto的touch模块，tap事件也是为了解决在click的延迟问题
    触摸事件的响应顺序
    1、ontouchstart 
    2、ontouchmove 
    3、ontouchend 
    4、onclick
    解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透灰色遮罩

</>复制代码 
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}  

部分android系统中元素被点击时产生的边框怎么去掉android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带效果

</>复制代码 
a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-user-modify:read-write-plaintext-only; 
} 

禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

</>复制代码 
html {
　　        -webkit-text-size-adjust: 100%;
}

事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

</>复制代码 
window.onorientationchange = function(){
            switch(window.orientation){
                case -90:
                case 90:
                alert("横屏:" + window.orientation);
                case 0:
                case 180:
                alert("竖屏:" + window.orientation);
                break;
            }
}

样式
//竖屏时使用的样式

</>复制代码 
@media all and (orientation:portrait) {
    .css{}
}

//横屏时使用的样式

</>复制代码 
@media all and (orientation:landscape) {
    .css{}
}

</>复制代码 
的accept 属性

消除transition闪屏

</>复制代码 
.css{
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

开启硬件加速
解决页面闪白
保证动画流畅

</>复制代码 
  .css {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
  }    

1. 移动端基础框架

</>复制代码 
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

2. 滑屏框架

</>复制代码 
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper

3.瀑布流框架

</>复制代码 
masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配