当前,手机设备发展迅猛、屏幕尺寸各不相同、存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能、响应式的移动网站,是Web开发者所要面对的首要挑战。HTML5以及移动网站都是很有前景的技术,本身也仍在不断的演进。移动端Safari浏览器是当前最常用的iPhone应用,它使开发人员可以创建高性能的网页应用并提高用户的浏览体验。移动网站的好处在于,你不需要申请开发者账号就可以运营和维护,不需要通过任何应用市场的审核就发布,不需要通过繁琐的审核就可以在任何时候更新。但是它也有许多问题,比如,浏览器的不一致;相对于原生应用缺少某些功能和安全性。

  在接下来的学习中会注于6种最流行的移动设备,特别是iPhone、Android、Windows Phone:

iOS、Android、Windows Mobile、Blackberry v6.0上、Symbian 60、Palm webOS;两种跨设备的浏览器:Opera Mobile、Firefox Mobile。

  一、确定网站的适用移动设备

  当你创建一个移动网站,你必须思考以下类似的问题:

  1.用户最常用的平台和浏览器是什么?

  你必须首先确定谁是你的目标用户,他们会使用什么移动设备来访问你的网站。有许多分析工具可以帮助你回答这些问题,例如Google Analytics。你可以免费注册Google Analytics的账号:http://www.google.com/analytics/。使用Google Analytics的方法非常简单,你需要做的只是从Google Analytics网站引入一小段JavaScript嵌入到你的网站中。大部分现代智能手机都支持JavaScript,所以在移动网站中使用它与在桌面网站中没有不同。

  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。

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

  3.应该在哪些设备和模拟器上测试?

  先确定需要支持的核心移动设备,再看看如何配置。我们的目标是最大化覆盖率和最小化成本,虽然所有的设备都有模拟器,但他们并不支持所以的平台。如图:

  Google Analytics不是市场上唯一的移动数据分析服务商,还有其他的服务商提供更有针对性的服务,比如PercentMobile提供一个帮助分析你的移动用户群和网站价值的移动数据分析服务。移动设备报告的位置并不总是精确的,Google Analytics的Map Overlay报告以用户的IP地址来确定用户的位置。由于移动设备的IP来源于无线网关,它不需要也不知道移动用户的准确位置,所以些许不准确也是可以接受的。  

  对于服务端读取速度的担忧:

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

  下面是用于网页设计和测试的主流移动设备模拟器下载表:

  针对跨平台浏览器的工具,特别是Opera和Firefox。浏览器的模拟器下载表:

  BlackBerry仿真器(这里不做过多介绍)

  大部分移动设备仿真器都可以很容易地根据其官方网站的介绍来安装和配置,但是BlackBerry仿真器的工作方式与其他仿真器不同。从BlackBerry仿真器连接互联网,除了下载仿真器还需要下载安装BlackBerry Email and MDS Services Simulator。

  社区搜集的仿真器、模拟器:

  如果你没有智能手机,也可以使用很多仿真器、模拟器,你可以在Mobile Boilerplate项目的wiki页面找到:http://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators

  Fritman搜索的仿真器、模拟器:

  Maximmiliano Fritman,一个移动网站开发人员和作家,他维护了一个仿真器列表:http://www.mobilexweb/emulators

HTML5移动Web开发(一)——HTML5和移动网站基本概念以及一些模拟器的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  3. HTML5移动Web开发(八)——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  4. HTML5移动Web开发指南-学习笔记(一)

    一,浏览器引擎    浏览器的内核引擎,基本上是四分天下: Trident: IE 以Trident 作为内核引擎; Gecko: Firefox 是基于 Gecko 开发; WebKit: Safa ...

  5. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  6. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  7. HTML5移动Web开发(十)——在浏览器中启动手机原生应用

    用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...

  8. HTML5移动Web开发(九)——优化浏览器视口宽度设置

    每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...

  9. HTML5移动Web开发(七)——通过界面图标启动Web应用

    现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的We ...

随机推荐

  1. win7升级为Win10 10586版本,出现应用商店打不开的解决办法

    把公司的win7升级为了win10,但是打开应用商店时是白的,什么都没有,过一会之后,会有提示信息. 报的错误是: 错误代码:0X80072ee2 最后,我的解决办法是: 首先,咱们返回到win10 ...

  2. 【C语言学习】《C Primer Plus》第10章 数组和指针

    学习总结 1.数组初始化方式: int a[]={1,2,3} int a[SIZE]={1,2,3} //SIZE是宏定义,数组初始化个数不能大于SIZE,否则报错:当个数小 //SIZE,自动补0 ...

  3. 作业三:PSP记录个人项目耗时情况

    PSP2.1        Personal Software Process Stages Time Planning  计划    20min              Estimate 估计开发 ...

  4. hadoop研究:mapreduce研究前的准备工作

    继续研究hadoop,有童鞋问我,为啥不接着写hive的文章了,原因主要是时间不够,我对hive的研究基本结束,现在主要是hdfs和mapreduce,能写文章的时间也不多,只有周末才有时间写文章,所 ...

  5. 浅谈Excel开发:一 Excel 开发概述

        做Office相关的开发工作快一年多了,在这一年多里,在插件的开发中遇到了各种各样的问题和困难,还好同事们都很厉害,在和他们的交流讨论中学到了很多的知识.目前Office相关的开发资料是比较少 ...

  6. 赴美工作常识(Part 3 - 英语)

    在<Part 2 - 申请>的评论中有人问英语要达到何种水平,以及如何提高.其实英语也不是我的强项,只是刚刚好做到能够沟通而已.由于我在知乎上回到过一个类似问题,我就基于那个答案简单说一下 ...

  7. php操作xml

    最近计划写个人的小网站,一系列原因选择了用php来写,最大的问题就是虽然php很流行,但我从来没有接触过php,看了一个多星期的基本语法后做些小练习热热身,但是期间是各种问题啊,主要是对php不熟悉, ...

  8. 看svn用户组管理功能的产品设计

    我负责公司的svn配置.用了近一年了,今天饶有兴致,分享一下svn的用户组管理功能,这个产品设计值得借鉴,简单易用. svn用户组管理的功能描述:新建用户组,并给组分配成员用户:编辑用户组,包括修改组 ...

  9. CSS的样式表基本概念

    一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...

  10. Bootstrap~多级导航(级联导航)的实现

    回到目录 在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://v ...