[WebView学习之六]:Web Apps最佳实践规则

浏览数：22 / 时间：2015年06月11日

上一篇我们学习了( [WebView学习之五]:调试Web Apps),今天我们来继续学习。

(博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明。

Author:hmjiangqq

为移动设备开发Web页面以及Web应用程序(Application)和开发传统的桌面Web浏览器相比存在一些不同的地方以及难点。为了帮助你更好的开发以及为移动设备开发出更加有效的Web应用程序，以下讲到的开发实践规则将会非常有用:

(一):移动设备访问重定向访问专门为Web站点定制的Web页面

在使用服务器端重定向时有好几种方式进行重定向请求移动设备版本的网站。大多数情况下，我们可以通过服务器"嗅探"出Web浏览器的用户代理信息，来决定是否需要移动版本的网站。你可以简单的的查询是否存在"mobile"这个用户代理信息，这种方式可以适合于大部分的移动设备。如果又必要你可以定义一个特殊的用户代理信息(例如:"Android2.1")。

[注]:大尺寸的Android设备需要提供全尺寸的网站(例如:平板电脑)，因为设备不包含"mobile"这类的用户代理信息。除此之外其他的Android设备基本都差不多有相同的用户代理信息。因为选择移动版本网站是以设备是否存在"mobile"这样的用户代理信息来决定的。

(二):网页的HTML代码是需要使用专门适合移动设备的标签DOCTYPE

最常用的移动建站的标记语言是以XHTML为基础的。这种标准可以确保网站在移动设备上面可以显示的效果最佳。例如:该不允许HTML Frames或者嵌套表结构。一旦使用DOCTYPE标签，就要确定网页代码文档使用特殊的字符编码(例如:UTF-8)。如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

同时需要确定网页标签中的DOCTYPE的声明是有效的，你可以通过下面的网站进行验证:http://validator.w3.org.

(三):正确使用viewport meta数据来调试Web页面，达到最佳显示效果

在代码文档的<head>标签中，你可以定义写meta标签属性来指定Web浏览器窗体如何渲染网页。例如:你可以设置浏览器窗体的高和宽度，页面初始缩放大小甚至是目标屏幕密度

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

更多关于viewportmeta的属性设置可以查看:[WebView学习之二]:使用Web Apps 支持不同分辨率屏

(四):避免多文件请求

一般移动设备的网络连接速度低于PC电脑,所以你需要尽可能提高网页加载速度。一个方法是尽量避免加载<head>标签中的CSS样式表以及Javascript脚本文件。相反的你可以在<head>中写CSS样式以及Javascript脚本代码(或者在<body>结尾写入网站加载过程不需要使用的脚本代码。)。另外你也可以使用例如:Minify这样的压缩工具来优化文件的大小以及提高加载速度。