利用HTML5将现有网页转成mobile版

最新推荐文章于 2021-06-19 03:27:06 发布

贪梦

最新推荐文章于 2021-06-19 03:27:06 发布

阅读量1.3k

点赞数

分类专栏： H5

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动meta标签

移动版的webkit浏览器支持一些比较特性，能带来更好的的浏览体验。
Viewport设置

最先要设置的meta属性就是viewport。设置viewport告诉浏览器，网页内容应该怎么样去适应设备的屏幕，同时对设备的屏幕进行优化。例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >

Note: width能用px单位，如设置width=320和设置width=device-width在iphone和其它一些智能手机上的效果一样。但并不是所有手机都是这个宽度，所以最好设置device-width让浏览器自己去识别。

Android对viewport标签进行了扩展:
<meta name="viewport" content="target-densitydpi=device-dpi">

target-densitydpi的值有 device-dpi, high-dpi, medium-dpi, low-dpi.

如果你要为网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有灵活性。
全屏浏览

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

要看这个meta的更多选项，请看 Safari reference documentation
Home 界面上的图标

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon"
href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed"
href="/static/images/identity/HTML5_Badge_64.png" />
看看html5rocks使用的移动meta标签
<head>
...
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

<link rel="apple-touch-icon"
href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed"
href="/static/images/identity/HTML5_Badge_64.png" />
...
</head>
垂直布局

在小屏幕中，垂直滚动比水平滚动方便很多，保持内容单列，垂直布局对移动设备最有利。以html5rocks为例。