2015
11-16

移动端web开发技巧

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。

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

<meta name=”apple-mobile-web-app-title” content=”标题”>

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

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

<meta name=”apple-mobile-web-app-capable” content=”yes” /> <meta name=”apple-touch-fullscreen” content=”yes” />

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 参数：

5. 移动端手机号码识别（IOS）

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

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

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

开启电话功能

<a href=”tel:123456″>123456</a>

开启短信功能：

<a href=”sms:123456″>123456</a>

6. 移动端邮箱识别（Android）

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

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

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

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

7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

8. IOS Web app启动动画

由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小

<!– iPhone –> <link href=”apple-touch-startup-image-320×460.png” media=”(device-width: 320px)” rel=”apple-touch-startup-image”> <!– iPhone (Retina) –> <link href=”apple-touch-startup-image-640×960.png” media=”(device-width: 320px) and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”> <!– iPad (portrait) –> <link href=”apple-touch-startup-image-768×1004.png” media=”(device-width: 768px) and (orientation: portrait)” rel=”apple-touch-startup-image”> <!– iPad (landscape) –> <link href=”apple-touch-startup-image-748×1024.png” media=”(device-width: 768px) and (orientation: landscape)” rel=”apple-touch-startup-image”> <!– iPad (Retina, portrait) –> <link href=”apple-touch-startup-image-1536×2008.png” media=”(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”> <!– iPad (Retina, landscape) –> <link href=”apple-touch-startup-image-2048×1496.png” media=”(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)” rel=”apple-touch-startup-image”>

（landscape：横屏 | portrait：竖屏）

9. 添加到主屏后的APP图标

指定web app添加到主屏后的图标路径，有两种略微不同的方式：

<!– 设计原图 –> <link href=”short_cut_114x114.png” rel=”apple-touch-icon-precomposed”> <!– 添加高光效果 –> <link href=”short_cut_114x114.png” rel=”apple-touch-icon”>

apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格）

apple-touch-icon-precomposed：使用“设计原图图标”

效果：

图标尺寸：

可通过指定size属性来为不同的设备提供不同的图标（但通常来说，我们只需提供一个114 x 114 pixels大小的图标即可 ）

官方说明如下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes. For iPhone and iPod touch both of these sizes are required: 57 x 57 pixels 114 x 114 pixels (high resolution) For iPad, both of these sizes are required: 72 x 72 pixels 144 x 144 (high resolution)

10. 优先使用最新版本 IE 和 Chrome

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

11.viewport模板