前言
本文介绍移动端重构的基础内容，主要包括基本模板、viewport、桌面图标、各种meta属性、QQ浏览器及UC浏览器私有meta。
基础篇
基本模板
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telphone=no, email=no" /> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> coding...... </body> </html> |
文档声明
|
1 |
<!DOCTYPE html> |
该声明向下兼容，同样适用于不支持HTML5标签的浏览器。
字符编码
|
1 |
<meta charset="utf-8" /> |
viewport
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> |
设置视窗宽为设备宽度，默认不缩放，不允许用户缩放。
忽略电话号码和邮箱识别
|
1 |
<meta name="format-detection" content="telphone=no, email=no" /> |
全屏模式
|
1 |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
在iOS中 隐藏工具栏和菜单栏。
顶部状态栏背景色
|
1 |
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
顶部状态栏(手机信号、时间、电池)的背景颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
设置缓存
|
1 |
<meta http-equiv="Cache-Control" content="no-cache" /> |
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
桌面图标
|
1 2 3 4 |
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" /> |
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
启动画面
|
1 |
<link rel="apple-touch-startup-image" href="start.png"/> |
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--iPhone--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!-- iPhone Retina --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPhone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!-- iPad portrait --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!-- iPad landscape --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!-- iPad Retina portrait --> <link href="apple-touch-startup-image-1536x2008.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-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" /> |
其它最佳实践
标签语义化，视产品需求考虑SEO、无障碍因素。合理使用HTML5 Element (<header><nav><section><article><footer>等)。避免<div>标签泛滥。
浏览器私有及其它meta
以下待验证
QQ浏览器私有<META>
全屏模式
|
1 |
<meta name="x5-fullscreen" content="true"> |
强制竖屏
|
1 |
<meta name="x5-orientation" content="portrait"> |
强制横屏
|
1 |
<meta name="x5-orientation" content="landscape"> |
应用模式
|
1 |
<meta name="x5-page-mode" content="app"> |
UC浏览器私有<META>
全屏模式
|
1 |
<meta name="full-screen" content="yes"> |
强制竖屏
|
1 |
<meta name="screen-orientation" content="portrait"> |
强制横屏
|
1 |
<meta name="screen-orientation" content="landscape"> |
应用模式
|
1 |
<meta name="browsermode" content="application"> |
其它<META>
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
|
1 |
<meta name="HandheldFriendly" content="true"> |
微软的老式浏览器
|
1 |
<meta name="MobileOptimized" content="320"> |
windows phone 点击无高光
|
1 |
<meta name="msapplication-tap-highlight" content="no"> |
参考自：腾讯KM – alfiehe
支持一下博主
发现一个好地方啊，以后会多来学习学习~~