首页 > 代码库 > Html5开发总结

Html5开发总结

【Html5能够离线操作、能否开发Html5离线网络应用程序

按常理Html5开发出来的是Web网页应用,则网络连接才能下载并使用,作为Html5对离线应用开发的支持最大的特殊,支持离线需要满足如下条件:

  1. 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 
    中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。
  2. 在线状态检测:开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在 HTML5 
    中,提供了两种检测当前网络是否在线的方式。
  3. 本地数据存储:离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,HTML5 提供了 DOM Storage 和 Web
    SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能。

:我的网络应用程序包含了很多页面。我是否需要在每个页面都使用manifest属性,或者我可以只在主页中使用?

:你网络服务器中的每个页面都需要一个指向缓存名单的为全部应用程序准备的manifest属性。

你的每一个HTML页面指向你的缓存名单文件,并且你的缓存名单文件由合适的Content-Type头支持。但名单文件里有些啥?这是有趣的事情。

:我需要在我的缓存名单中列出我的HTML页面么?

:是或者不是。如果你所有的网络应用程序被包含在一个单页面,只需要确认页面通过使用manifest属性指向了缓存名单。当你访问一个含有manifest属性的HTML页面,页面本身被假设为网络应用程序的一部分,所以你不需要将它本身列入名单文件。尽管如此,如果你的网络应用程序包含多个页面,你应该在名单文件中列出所有的HTML页面,否则浏览器将不会知道有其他的HTML页面需要下载并缓存。

Html5在移动端的屏幕适应性问题

Html5可以说天生为了移动客户端而存在的,所以开发手机浏览器访问的应用需要自适应手机屏幕

在网页的<head>中增加下面这句话,可以让网页的宽度自动适应手机屏幕的宽度。

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes”/>

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例


【Html5