移动 Web 开发技巧
一、移动端手机号码的识别
在 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>
二、移动端邮箱识别(Android)
与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:
<meta content="email=no" name="format-detection" />
同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
<a mailto:[email protected]">[email protected]</a>
三、百度禁止转码
通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:
<meta http-equiv="Cache-Control" content="no-siteapp" />
四、设置状态栏的背景颜色(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 ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
五、移动端如何定义字体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
- MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
- MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
- MSPointerUp——当手指离开屏幕时触发
八、移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input,textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ }