微信H5手机网页开发

序言

　　随着微信(WeChat)的盛行，一个流行的开发工作也随之诞生——微信公众号开发，而其中最主要的部分，当属微信H5网页开发。
　　虽然网页开发大家并不陌生，但层出不穷的手机型号，导致了微信网页开发中遇到的最难的问题——手机分辨率适应。
　　实际上，针对手机分辨率的问题，也有相应的设置来解决，下面由我带领大家来揭秘这让人头疼的微信H5网页开发。希望各位能够享受这段文字旅程并有所收获。

前言

为什么写本文
　　本人在微信开发这条路也已经走了将近3年了，在H5网页制作方面也曾希望有高人能指点一番，然而并没有遇到。很多问题虽然网上有各种资料可以查询，但是都不够系统，因工作问题，没有时间系统的去学习一番，故而一致都是在摸索中前进，经点滴积累，现在我希望把我的经验分享给大家，希望大家阅读愉快。
本文的主要内容和特色
　　本文将以介绍为基本开篇，逐步引出在微信浏览器下开发我们的H5网页，以一个微信商城案例，循序渐进，一步步为大家剖析在微信浏览器下的H5网页设计原理和方法。
本文面向的读者
　　本书希望面向的读者可以是已经从事web开发的各类开发人员和对web开发感兴趣的初学者。

第一章了解HTML5

1.1 什么是HTML5

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

1.2 HTML5是如何起步的

HTML5 是 W3C 与 WHATWG 合作的结果。
编者注：W3C 指 World Wide Web Consortium，万维网联盟。
编者注：WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

1.3 新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

1.4 HTML5的一个实例

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag。
</video>
</body>
</html>

1.5 本章小结

　　本章先带领大家了解html5的基本来历，接下来以案例“微信商城”分模块，一步一步揭开HTML开发的神秘面纱。

第二章 header里标签的奥秘

2.1 HTML head 元素

　　head 元素是所有头部元素的容器。head 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：title、base、link、meta、script 以及 style。

2.2 HTML title 元素

title 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

2.3 HTML base 元素

base 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

2.4 HTML link 元素

link 标签定义文档与外部资源之间的关系。
link 标签最常用于连接样式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2.5 HTML style 元素

style 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

2.6 HTML meta 元素

　　元数据（metadata）是关于数据的信息。
　　meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
　　典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
meta 标签始终位于 head 元素中。
　　元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2.7 本章小结

　　本章为大家简单的罗列了在网页开发中head部分常见的标签，在下一章节中，我们将详细为大家解释meta标签的奥秘。

第三章 HTML Meta 常用的元素

3.1 meta 语法

3.2 meta之keywords元素

说明：为搜索引擎提供的关键字列表
用法：<meta name="keywords" content="关键词1,关键词2，关键词3,关键词4,……">

3.3 meta之description元素

说明：用来告诉搜索引擎你的网站主要内容
用法：<meta name="description" content="你网页的简述">

3.4 meta之author元素

说明：标注网页的作者或制作组
用法：<meta name="author" content="K神，K神工作室">
注意：content可以是：你或你的制作组的名字,或Email

3.5 meta之copyright元素

3.6 meta之generator元素

说明：编辑器的说明
用法：<meta name="generator" content="PCDATA|FrontPage|">

3.7 meta之revisit-after

说明：用来控制搜索引擎抓取网站的频率，告诉搜索引擎多长时间来网站抓取一次
用法：<meta name="revisit-after" content="7 days">

3.8 本章小结

　　本章详细给出了常用的HTML种meta标签和用法。这些都是web开发中的基本知识，为手机网页开发做准备，下面我们先直接进入手机网页开发，看看需要对head进行哪些特殊的定义呢？

第四章手机网页开发之head必修课

4.1 你知道手机的分辨率吗？

　　在手机参数中，往往会看到，手机屏幕分辨率这一个参数，这个参数是一个怎么样的意思呢，关于分辨率你又了解多少呢？
屏幕物理尺寸：屏幕对角线的实际尺寸，如2.4寸,3.5寸等等。
屏幕分辨率：屏幕所能显示的像素的多少，如320*480等。
屏幕密度(pix per inch)：以每英寸的像素数。每英寸的分辨率数。如160dpi。
　　物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。
　　相同的屏幕大小如果分辨率高，则屏幕元素更精细，一个界面元素在屏幕里的实际尺寸，在密度较小的屏上，界面元素的实际尺寸就会更大一些，反之亦然。
　　所以在手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，因为人眼看到的是实际尺寸。
下面列出了常用的手机分辨率：

3.5英寸，480x320(HVGA)，165PPI
3.5英寸，800x480(WVGA)，267PPI
3.5英寸，854x480(WVGA)，280PPI
3.5英寸，960x640(DVGA)，326PPI(苹果iphone4)
3.7英寸，800x480(WVGA)，252PPI
3.7英寸，800x480(WVGA)，252PPI
3.7英寸，960x540(qHD)，298PPI
4.0英寸，800x480(WVGA)，233PPI
4.0英寸，854x480(WVGA)，245PPI
4.0英寸，960x540(qHD)，275PPI
4.0英寸，1136x640(HD)，330PPI(苹果iphone5)
4.2英寸，960x540(qHD)，262PPI
4.3英寸，800x480(WVGA) ，217PPI
4.3英寸，960x640(qHD)，268PPI
4.3英寸，960x540(qHD)，256PPI
4.3英寸，1280x720(HD)，342PPI
4.5英寸，960*540(qHD)，245PPI
4.5英寸，1280x720(HD)，326PPI

4.2 如何编写自适应各种手机分辨率的网页呢？

　　案例一：2010年，Ethan Marcotte提出了“自适应网页设计”(responsive web design)，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
　　案例二：利用@media screen实现网页布局的自适应，就是针对不同的分辨率调用不同的样式文件。
　　案例三：使用body的zoom属性，对网页进行缩放。
　　案例四：使用viewport的initial-scale值，对网页进行缩放。
我想对以上的做法表示无奈，真的什么招都用尽了，下面我来给大家详细分析一下网页开发中遇到的坑吧！

4.3 手机网页必学标签meta之viewport

viewport 语法介绍

<meta name="viewport"
content="height = [pixel_value | device-height] ,width = [pixel_value | device-width ] ,initial-scale = float_value ,minimum-scale = float_value ,maximum-scale = float_value ,user-scalable = [yes | no] ,target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"/>

width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height
和 width 相对应，指定高度。
initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。
示例1：设置屏幕宽度为设备宽度，禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,user-scalable=no" />
示例2：设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

device-dpi –使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
dpi-value - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间
编者注：可惜的是目前手机浏览器已经放弃了target-densitydpi属性

4.4 未完待续