最近一直有人问，移动端的页面怎么写啊？要注意什么啊？和PC页面有什么区别？…… 就会有很多的疑问。其实要我回答这些问题可能也不知道怎么回答小伙伴。我也没有专门学习过移动端的制作，大部分都是工作后慢慢捉摸的。小月博客这几天会专门分享关于移动端的小技巧请多多关注哦
创新互联是一家专业提供容城企业网站建设,专注与成都网站建设、做网站、html5、小程序制作等业务。10年已为容城众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
今天给大家分享一些移动端 web 开发的小技巧吧！
一、移动端手机号码的识别
在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：
开启电话功能
123456
开启短信功能：
123456
二、移动端邮箱识别（Android）
与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
dooyoe@gmail.com
三、百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：
四、设置状态栏的背景颜色（IOS）
设置状态栏的背景颜色，只有在 “apple-mobile-web-app-capable” content=”yes” 时生效
content 参数：
五、移动端如何定义字体font-family
三大手机系统的字体：
ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
各个手机系统有自己的默认字体，且都不支持微软雅黑 如无特殊需求，手机端无需定义中文字体，使用系统默认 英文字体和数字字体可使用 Helvetica ，三种系统都支持
* 移动端定义字体的代码 */
body{font-family: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 和 winphone)
当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
以下支持winphone 8
八、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}今天就分享到这里了，这些小技巧在我们日常使用中非常有用。如果你在工作中遇到什么BUG 或者收获了什么好的经验技巧可以给我留言。
新闻名称：移动Web开发技巧
网站URL：
http://www.tsicrk.com/article/pdpcog.html
