《HTML5移动Web开发实战》—— 1.2 确定网站的适用移动设备

简介:

本节书摘来异步社区《HTML5移动Web开发实战》一书中的第1章,第1.2节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 确定网站的适用移动设备

HTML5移动Web开发实战
适用浏览器:所有

你不可能给每个移动设备都单独做一个移动网站,没有人有这样的时间和精力。

跨浏览器的移动网站开发是非常困难的,其难点在于如何确定网站的适用范围,John Resig(jQuery Mobile的创始人)在一个描述jQuery Mobile创建经历的PPT(中提了三个问题:

  • 哪些平台和浏览器是流行的?
  • 哪些浏览器可以支持现代脚本?
  • 哪些设备和模拟器需要我进行测试?

当你创建一个移动网站,你必须思考类似的问题,但并不一定完全相同,因为不同的网站的目标用户不同。所以你的问题应该是:

  • 用户最常用的平台和浏览器是什么?
  • 有多少用户使用支持现代脚本的移动设备?
  • 应该在哪些设备和模拟器上测试?

1.2.1 用户最常用的平台和浏览器是什么

首先我们来回答第一个问题。在创建移动网站之前,你必须首先确定谁是你的目标用户,他们会使用什么移动设备来访问你的网站。有许多分析工具可以帮助你回答这些问题,例如Google Analytics。你可以在这里免费注册Google Analytics的账号:http://www.google.com/analytics/

使用Google Analytics的方法非常简单(大部分开发者对它并不陌生),你需要做的只是从Google Analytics网站引入一小段JavaScript嵌入到你的网站中。

大部分现代智能手机都支持JavaScript,所以在移动网站中使用它与在桌面网站中没有不同。

1.2.2 有多少用户使用支持现代脚本的移动设备

我们现在来回答第二个问题。也许你想知道有多少人使用移动浏览器访问你的网站,同时你也想知道有多少人使用完全不支持JavaScript的老旧移动浏览器。因为如果使用低端智能手机的人多于使用高端智能手机的人,那么就不值得以HTML5作为核心技术了(虽然这种可能性很低)。

所以如果你不仅希望知道有多少人使用智能手机,同时也希望知道有多少人使用老旧的移动电话,Google Analytics移动版可以派上用场。你可以在这里下载脚本:

http://code.google.com/mobile/analytics/download.html#
Download_the_Google_Analytics_server_side_package

Google Analytics移动版服务器端程序包当前支持JSP、ASPX、Perl以及PHP,让我们来看一个基于PHP的例子。你所需要做的只是修改ACCOUNT ID GOES HERE为你的GA账户ID,也记得修改“UA-xx”为“MO-xx”。

遗憾的是,当你使用服务端版本,就不能同时使用ga.js这一JavaScript跟踪代码库。放弃JavaScript版本让人很遗憾,因为JavaScript版本提供了很多服务端版本所缺乏的动态跟踪机制:

7203f5fced656e480a3e7f31353fe0ac9452cb1a

1.2.3 Google Analytics**的替代品

Google Analytics不是市场上唯一的移动数据分析服务商,还有其他的服务商提供更有针对性的服务,比如,PercentMobile提供一个帮助分析你的移动用户群和网站价值的移动数据分析服务。你在这里可以找到更多关于该服务的信息:

http://percentmobile.com/

1.2.4 Google Analytics的精准度

移动设备报告的位置并不总是精确的,Google Analytics的Map Overlay报告以用户的IP地址来确定用户的位置。由于移动设备的IP来源于无线网关,它不需要也不知道移动用户的准确位置,所以些许不准确也是可以接受的。

1.2.5 对服务端读取速度的担忧

基于服务端的处理方式,可能会对服务器造成额外的负担和影响,所以Google建议先在某些页面小范围测试一下,确保一切正常之后再在全站部署。

相关文章
|
5月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
5月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
9天前
|
安全 大数据 数据挖掘
课时9:阿里云Web应用防火墙:全面保障网站的安全与可用性
阿里云Web应用防火墙(WAF)基于阿里巴巴十年攻防经验,提供全面的网站安全防护。它通过Web应用防护、CC攻击防护和业务风控,有效应对各类网络威胁,确保网站的安全与可用性。智能双引擎技术降低误报率,实时数据分析和虚拟补丁更新保障系统安全。WAF已成功护航多个重大活动,为企业提供高效、简便的安全解决方案。
|
5月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
5月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
192 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
4月前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
54 1
|
5月前
|
移动开发 人工智能 前端开发
介绍一些免费 的 html 5模版网站 和配色 网站
介绍一些免费 的 html 5模版网站 和配色 网站
897 3
|
5月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
5月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
5月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。