本网站只能被运行在支持JavaScript脚本的环境中

进行Web网站开发时需要执行的工作

本连载概述

针对PC用Web网站开发与智能手机或平板电脑用Web网站开发来说,开发者应该掌握的知识略有不同,包括编码、设计、开发工具等等。本连载讲述在进行这两种不同的Web开发时,Web开发者应该具备的开发工具。

进行Web网站开发时需要执行的工作

首先我们讲述,在开发各种Web网站时,通常需要执行的几项工作。

  • 使用HTML 5+CSS 3书写客户端界面,针对PC机、智能手机及平板电脑在CSS样式代码中进行区分,使界面在不同类型的设备浏览器中呈现不同的外观,针对各Web浏览器之间的区别书写不同的代码,使Web网站适用于各种Web浏览器。
  • 使用JavaScript脚本代码或jQuery等JavaScript框架让用户可以与应用程序之间进行交互操作。
  • 使用服务器端脚本代码(ASP.NET、PHP、JAVA等等)书写服务器端业务逻辑或抽取服务器端资源或数据。

针对一个Web网站来说,可以考虑在PC机用Web网站与开发智能手机或平板电脑用Web网站时采用同一个解决方案,也可以考虑在PC机用Web网站与开发智能手机或平板电脑用Web网站时采用相对独立的两个解决方案。这两种方法的利弊如下表所示。

方法 优点 缺点
采用同一个解决方案 在修改或添加功能时只需要针对一个解决方案进行修改 需要耗费时间针对不同的设备浏览器测试及调整CSS样式代码
采用独立的两个解决方案 在特定设备浏览器中修改或添加功能时影响的范围较小 需要针对不同的设备浏览器提供不同的解决方案。针对所有设备修改或添加功能时需要对两个解决方案进行修改。

接下来,我们针对第一种方法进行讲述。首先讲述在开发Web网站时如何使Web网站在各Web浏览器之间呈现出统一的外观。

为了实现这一处理,我们可以使用几种方法。

  • 根据不同的设备屏幕宽度书写不同的CSS样式代码。
  • 使用JavaScript代码判断用户使用设备及浏览器,加载不同的CSS样式文件。
  • 使用JavaScript脚本框架创建样式主题。

根据不同的设备屏幕宽度书写不同的CSS样式代码

在CSS 3中,可以使用媒体查询表达式检测各设备中浏览器宽度应用不同的CSS样式代码。

link元素使用方法示例

<link rel="stylesheet" href="(指定浏览器宽度届于320px-480px之间时使用的CSS样式文件)" media="only screen and (min-device-width : 320px) and
(max-device-width : 480px)">
<link rel="stylesheet" href="(指定浏览器宽度届于768px-1024px之间时使用的CSS样式文件)" media="only screen and (min-device-width : 768px) and 
(max-device-width : 1024px)">

CSS样式代码书写方法示例

@media screen and (min-width: 800px) {
    /*书写浏览器宽度大于800px时使用的样式代码*/
}

@media screen and (max-width: 399px) {
    /*书写浏览器宽度小于等于399px时使用的样式代码*/
}
@media screen and (orientation: portrait) {
    /*书写设备手持方向为横向时使用的样式代码*/
}
@media screen and (orientation: landscape) {
  /*书写设备手持方向为纵向时使用的样式代码*/
}

由于在CSS 3中开始采用媒体查询表达式,所以在老版本的Web浏览器,例如Internet Explorer 8及其之前各版本的Internet Explorer浏览器中并不对其提供支持。如果想在老版本的浏览器中使用媒体查询表达式,需要使用第三方JavaScript类库(例如css3-mediaqueries-js)。

在JavaScript脚本代码中检测设备及浏览器并指定需要加载的CSS样式文件

可以在JavaScript脚本代码中检测设备及浏览器并指定需要加载的CSS样式文件。

在JavaScript脚本代码中,可以通过navigator.userAgent属性值取得设备及浏览器名。navigator.userAgent属性值如下表所示。

操作系统 浏览器 navigator.userAgent属性值
Windows 7 Internet Explorer 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727)
Windows 7 Google Chrome Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
Mac OS X Safari Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/536.26.17 (KHTML, like Gecko) Version/6.0.2 Safari/536.26.17
Mac OS X Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
iOS Mobile Safari Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
Android Android浏览器 Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

在获取设备及浏览器名之后,可以加载特定平台中使用的CSS文件,代码如下所示。

if (navigator.userAgent.indexOf('iPhone')>0)
{
    document.write('<link rel="stylesheet" href="(iPhone设备中使用的CSS样式文件名)" media="screen">');
}
if(navigator.userAgent.indexOf('Android')>0)
{
    document.write('<link rel="stylesheet" href="(Android设备中使用的CSS样式文件名)" media="screen">');
}

通过与jQuery等外部JavaScript类库的结合使用,可以很方便地指定元素的显示或隐藏等状态或调整页面的滚动位置。

使用JavaScript脚本框架创建样式主题

可以通过使用提供了各种丰富的移动设备专用样式主题的JavaScript框架来快速地设计及开发各种移动设备用应用程序界面,这些框架包括Sencha Touch、jQuery Mobile、Dojo Mobile、Kendo UI等等。


jQuery Mobile

在各种JavaScript框架中,不仅提供了各种美丽的样式主题,还提供了各种美观的组件及各种可提高开发效率的API。

在下一节中,我们讲述各种iOS模拟器、Android模拟器的安装及使用方法。