移动 Web 开发技巧

最近一直有人问，移动端的页面怎么写啊？要注意什么啊？和PC页面有什么区别？……  就会有不少的疑问。其实要我回答这些问题可能也不知道怎么回答小伙伴。我也没有专门学习过移动端的制做，大部分都是工做后慢慢捉摸的。

今天给你们分享一些移动端 web 开发的小技巧吧！

1、移动端手机号码的识别

在 iOS Safari （其余浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话连接，好比：

• 7位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双链接线的数字，形如：00-00-00111
• 11位数字，形如：13800138000

可能还有其余类型的数字也会被识别。咱们能够经过以下的meta来关闭电话号码的自动识别：

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

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能：

<a href="sms:123456">123456</a>

2、移动端邮箱识别（Android）

与电话号码的识别同样，在安卓上会对符合邮箱格式的字符串进行识别，咱们能够经过以下的meta来管别邮箱的自动识别：

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

一样地，咱们也能够经过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

3、百度禁止转码

经过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，很是之恶心。不过咱们能够经过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

4、设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 参数：

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

5、移动端如何定义字体font-family

三大手机系统的字体：

ios 系统

• 默认中文字体是Heiti SC
• 默认英文字体是Helvetica
• 默认数字字体是HelveticaNeue
• 无微软雅黑字体

android 系统

• 默认中文字体是Droidsansfallback
• 默认英文和数字字体是Droid Sans
• 无微软雅黑字体

winphone 系统

• 默认中文字体是Dengxian(方正等线体)
• 默认英文和数字字体是Segoe
• 无微软雅黑字体

各个手机系统有本身的默认字体，且都不支持微软雅黑 如无特殊需求，手机端无需定义中文字体，使用系统默认 英文字体和数字字体可以使用 Helvetica ，三种系统都支持

* 移动端定义字体的代码 */

body{font-family:Helvetica;}

6、移动端字体单位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
    }
}

7、移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

如下支持webkit

• touchstart——当手指触碰屏幕时候发生。无论当前有多少只手指
• touchmove——当手指在屏幕上滑动时连续触发。一般咱们再滑屏页面，会调用event的preventDefault()能够阻止默认状况的发生：阻止页面滚动
• touchend——当手指离开屏幕时触发
• touchcancel——系统中止跟踪触摸时候会触发。例如在触摸过程当中忽然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

如下支持winphone 8

• MSPointerDown——当手指触碰屏幕时候发生。无论当前有多少只手指
• MSPointerMove——当手指在屏幕上滑动时连续触发。一般咱们再滑屏页面，会调用css的html{-ms-touch-action: none;}能够阻止默认状况的发生：阻止页面滚动
• MSPointerUp——当手指离开屏幕时触发

8、移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但没法使用 box-shadow 来清除，若是不须要阴影，能够这样关闭：

input,textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

今天就分享到这里了，这些小技巧在咱们平常使用中很是有用。若是你在工做中遇到什么BUG 或者收获了什么好的经验技巧能够给我留言。

 

下期分享敬请期待！ 小月博客