说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

jQuery Mobile 开发入门手册--技术理论

HTML文档下载 WORD文档下载 PDF文档下载
jQuery Mobile技术理论:WebKit和HTML5,移动 Web 应用程序的考虑,一般站点的呈现.

 

作者:张勇辉

 

技术理论

 

WebKit 和 HTML5

 

WebKit  是一种浏览器引擎,支撑着 iPhone  内的 Mobile Safari  浏览器以及 Android  内的浏览器背后的技术。WebKit  也在其他的移动环境内有自己的用武之地,但是我们还是将我们的讨论集中于 iPhone  和 Android  平台。

WebKit  是一个开源项目,其起源可追溯到 K Desktop Environment (KDE)。WebKit  项目催生了面向移动设备的现代 Web  应用程序。虽然设备本身的能力和形态因素都相当重要,但移动用户最热衷的仍然是内容。如果移动用户可用的内容只是 Internet  用户可用内容的一个很小的子集,那么用户体验充其量也只能划分为二等。

我们当中的大多数人都更希望生活是连贯的 — 如果我们在家中的笔记本上访问了一个网站,我们同样希望在火车上旅行时仍然访问到同样的内容。内容是最好的应用程序。不管我们身在何处、在做什么,我们都想要访问到我们的数据。WebKit  让 iPhone  和 Android  平台上可以有丰富的内容。

有一点很值得注意,即 WebKit  还应用在了桌面的 Safari  浏览器内,该浏览器是 Mac OS X 平台默认的浏览器。不管我们讨论的是桌面版本还是 iPhone  或 Android  上的浏览器引擎,WebKit  均优先支持 HTML  和 CSS  特性。实际上,WebKit  还支持尚未被其他浏览器采纳的一些 CSS  样式 — 这些特性正在得到 HTML5  规范的考虑。

HTML5  规范是一个技术草案集,涵盖了各种基于浏览器的技术,包括客户端 SQL  存储、转变、转型、转换等。HTML5  的出现已经有些时间了,虽然尚未完成,但是一旦其特性集因主要浏览器平台支持的加入而逐渐稳定后,Web  应用程序的简陋开端将成为永久的记忆。

Web  应用程序开发将成为主导 — 并且不只是在传统的桌面浏览器空间,还将在移动领域。移动将一跃成为首要考虑,而不再是后备之选。

 

移动 Web  应用程序的考虑

 

为了访问 Web  开发技术,如今,应用程序开发人员有几个选择。第一,应用程序可严格编写为服务器上的 HTML、CSS  和 JavaScript  文件。当然,HTML  内容可以产生自静态 HTML 文件,也可以从任何的服务器端技术(比如 PHP、ASP.NET、Java Servlets  等)动态生成。

所有这些技术追根到底都可简单地用术语 HTML  指代 — 这不是本文讨论的重点所在 —并且最为重要的是,受 WebKit-支撑的浏览器能够在移动设备上解析和呈现 HTML。

用户通过在移动设备上(即 iPhone  或 Android)打开浏览器应用程序并输入目标服务器对应的 URL:http://yourcompanyname.com/applicationurl  来访问 Web  应用程序。

特定的某个移动 Web  应用程序总是能找到自己的位置:从一般的 Web  站点到高度特定于平台的移动 Web应用程序。

 

一般站点的呈现

 

WebKit  内的呈现引擎,再配以 iPhone  和 Android  平台上的高度直观的 UI,实际上就使得几乎任何一个基于 HTML  的 Web  站点都能呈现在此设备上。Web  页能被正确呈现,不再像原来的移动浏览器体验:内容被包裹起来或是根本不显示。当页面加载后,内容通常被完全缩放以便整个页面都可见,尽管内容会被缩放得非常小,甚至不可读,如图 1  所示。不过,页面是可滚动、放大、缩小的,这就提供了对全部内容的访问。默认地,浏览器使用 980 像素宽的视见区或逻辑尺寸。

要想使 Web  页面从一般的页面变成支持移动设备的页面,Web  应用程序可以在几个方面进行修改。

虽然页面可以在 WebKit  中正确呈现,但是,一个以鼠标为中心的设备(比如笔记本或台式机)与一个以触摸为中心的设备(比如一个 iPhone  或 Android  智能手机)还是有区别的。其中主要的一些差异包括 “可单击” 区域的物理大小、“悬浮样式” 的缺少以及完全不同的事件顺序。如下所列的是在设计一个能被移动用户正常查看的 Web  站点时需要注意的一些事情:

•iPhone/Android  浏览器呈现的屏幕是可读的 — 大大好于传统的移动浏览器 — 所以不要急于草草制作您网站的移动版本。

•手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点 — 不要把链接放得相互太靠近,因为用户不太可能单击了一个链接而不触及相邻的链接。

•悬浮样式将不再奏效,因为用手指不能进行用鼠标指针进行的 “悬浮”。

•诸如 mouse-down、mouse-move  等事件在基于触摸的设备上自然大相径庭。这类事件中有一些将被取消,不要指望移动设备上的事件顺序与桌面浏览器上的一样。

让我们来看看要使一个 Web  站点对 iPhone  或 Android  访客具有友好性所面临的最为明显的一个挑战:屏幕大小。我们今天使用的实际移动屏幕尺寸是 320x480。请注意由于用户可能会选择横向查看 Web  内容,所以屏幕大小也可以是 480x320。正如我们在图 1  中看到的,WebKit  将能很好地呈现面向桌面的 Web  页面,但是文本可能会太小以至于若不进行缩放或其他操作就无法有效阅读内容。那么,我们该如何应对这个问题呢?

最为直观也是最不唐突的适合移动用户的方式是通过使用一个特殊的 metatag:viewport。metatag  是一个放入 HTML  文档的 head  元素内的 HTML  标记。如下是一个使用 viewport 标记的简单例子:<meta name="viewport" content="width=device-width" />。当这个 metatag 被添加到一个 HTML  页面后,我们看到此页面被缩放到更为适合这个移动设备的大小,如图 2  所示。如果浏览器不支持此标记,它会简单地忽略此标记。

为了设置特定的值,将 viewport metatag  的 content  属性设为一个显式的值: <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />。通过改变初始值,屏幕就可以按要求被放大或缩小。将值分别设置在 1.0  和 1.3  之间对于 iPhone  和Android  平台是比较合适的。viewport metatag  还支持最小和最大伸缩,可用来限制用户对呈现页面的控制力。

自具有 320x480  布局的 iPhone  面世以来,其形态系数就一直没有改变过,而随着来自不同制造商、针对不同用户群的更多设备的出现,Android  则有望具备更多样的物理特点。在开发应用程序并以诸如 Android  这类移动设备为目标时,一定要考虑屏幕尺寸、形态系数以及分辨率方面的潜在多样性。

除了 Android  设备与其他设备之间的这些物理差异之外,经验还表明 Android  的软件还通过设备内置的(on-device)浏览器设置对页面的呈现实施了更多控制。不仅稳定,Android  平台还很灵活。取决于 SDK  等级和制造商,某个设备上的设置很可能不同于您的开发环境。

图 4  显示了取自 Android Emulator V1.6 的浏览器应用程序的设置页面。这个设置屏幕允许用户将一个设备设置为一个预先定义的缩放等级(far、near、medium)或请求此设备自动适应页面。

 

AppGratis CEO现身说法:应用被苹果儆杀始末 一个Web设计师眼里的云计算 戴尔高管:服务器业务领先惠普五年时间 Hoodie:基于JS与CouchDB的超快速Web开发框架 设计优秀API的五大规则 盘点英特尔IDF2013第一天:技术产品新趋势 英雄组队去打怪!Nimble Quest开发团队访谈 云通讯平台打造本土Twilio 被逼无奈?传微软或明年秋发布iOS和Android版Office 欧洲各国政府将向大众开放公共数据 访联想云存储罗予晋:优化MooseFS,共建生态系统 磊友创始人赵霏:关于HTML5与Flash争执之我见 国际混乱C语言代码大赛优胜作品详解之“A clock in one line” 揭秘程序员大脑编程的七大“误区” 从Java到ObjC语言的桥梁:谷歌J2ObjC 0.7版本亮相 数据库管理系统ParElastic:打破常规 扩展云端MySQL 谷歌苹果专利纠纷意在战略无意和解 美法官为其苦恼 Facebook收购神秘移动软件创业公司Osmeta 修改驱动,使用Erlang+VoltDB实现每秒87.7万事务 横评美国IaaS“8匹狼”:AWS、GCE、Azure、Rackspace、SoftLayer、Dell、HP、Joyent 独立游戏精神释放的舞台:IGF China 2013作品火热征集中 三款热门入门级在线编程教程对比 微软modern.IE:网站兼容性测试利器 Localytics:AngularJS代替Backbone 代码减少一半 史上增长最快的SaaS服务Optimizely:13亿访客,10万次测试 IDF上的云计算故事 移动周报:百万年薪、微信疑云,老罗小马本周很忙 一个创业失败者的自述:我是如何搞砸一款产品 收入百万美元:一个放弃上大学的程序员 Cocos2D配Box2D:逆天小白程序员作iOS游戏 招聘移动开发,老板必问的10个问题 请教一个问题 请问怎样使动态创建的控件响应一个事件 windows编程高手请进 我真惊了,小弟刚用VB6,请问,VB6怎么会有乱吗问题?怎么解决!各位大侠请帮忙!! 如何使一段程序停止运行,并自动释放相应的堆栈? 请问西安哪儿能买到《The C++ programming Language》? 谁能告诉我#include <fstream>和#include <fstream.h>的区别? 条件?返回值1:返回值2???? 在CEDIT的CHANGE事件中怎么不可以用CEDIT::REPLACESEL()?? 打印高手请进 谢了 简单的键盘消息! 如何在表里添加列? dll调用的问题 请知道NotesSMEI的高手帮忙 奇怪错误 如何用ATL创建一个全局COM(只启动一个实例)供所有客户端使用? 如何修改一个域的值?用@SETfield吗? 怪! 怪! 怪! 为何存储不上数据???(急) 我真惊了,小弟刚用VB6,请问,VB6怎么会有乱吗问题?怎么解决!各位大侠请帮忙!! 急救!!用pb写登陆界面出现的大问题! 欢迎大家来! 急!如何在一个form窗体里面来移动线条,就象类似于画基本的电路图那样,谢谢高手的指教!!! 哪儿有<<新编计算机绘图>>下载啊? 给高分 急!如何在一个form窗体里面来移动线条,就象类似于画基本的电路图那样,谢谢高手的指教!!! 可以用网页文件重新启动机器吗? 高手请看看!!!如何用ATL创建一个全局COM(只启动一个实例)供所有客户端使用? 哪里能下载到vs.net正式版?(100分) pascal 谁知道有没有创建Service的好工具? 谁来介绍一下CORBA ? 请教ODBC SQL中 CONVERT的用法? 笔记本电脑开不了机!!!! 关于ClientDataSet SQL动态参数的问题? 关于在PB的script中直接嵌入SQL 单机使用什么数据库最好! 怎么远程启动一个程序? 一个XSLT的小问题 C++Builder高手回答!!(关于在NOVELL上的应用) 急!请问哪位高手知道怎么用VB来开发组态软件。请多提提建议! 大家好!~新人来了!~ 如何实现MicroHelp即状态栏的分段 麻烦各位介绍几个有SCJP模拟题的网址!谢谢!!!! 关于Read&Data! 现在只能显示最新的120篇,能不能家多点呀,例如最新1000篇? VS.net哪里有正式版的下载呀?大侠们有没有地址呀? 谁能告诉我哪儿有TR下载,不是TRW,谢谢!50分相送~ 求助!!急!急!…… console下可以用ado访问sql server数据库马? 诸位仁兄,帮小弟推荐一本学J2EE的书。 DataModule4.ClientDataSet1.Locate的问题求救! NetLocalGroupEnum 如何使用列举远程用户 某纳盐溶液可能含有硝酸根、碳酸根、亚硫酸根、硫酸根、碘离子、CL-、Br-.为了鉴定这些离子,分别取少量溶液进行以下实验:5,加HNO3酸化后,加过量AgNO3,溶液中析出白色沉淀.分析上述实验, 高中化学常见的带色物质 含什么元素的汽油污染空气 【高中化学】离子推断题某无色溶液由Na+、Ag+、Ba2+、Al3+、AlO2-、MnO4-、CO32-、SO42-中的若干种组成.取该溶液做如下实验:(A)取适量试液,加入过量盐酸,有气体生成,并得到溶液.(B)在 高中化学常见的物质颜色 广州市空气被污染的主要原因有哪些? AB是Na2CO3 和Ba(OH)2 为了确定X,现将(1)中的两种物质记为A和B,当C与B的溶液混合时,产生红褐色沉淀和无色无味气体;当C与A的溶液混合时产生棕黄色沉淀,向该沉淀中滴入稀HNO3,沉淀部分溶解,最 请部师傅们磁性开关与接近开关的使用是一样吗?它们的功能一样吗?可以互换使用吗? 高中化学的离子哪些有颜色,分别是什么颜色? 利用澄清石灰水可以验证人的呼吸作用能否产生二氧化碳这句话是对是错 接近开关和磁性开关及光电开关的区别? 燃放烟花爆竹对空气的污染程度有影响吗? 人的呼吸作用为什么会消耗氧气,产生二氧化碳? 干簧管怎么样做磁性接近开关 怎样评价空气污染物对城市空气的污染程度 人的呼吸作用在哪进行?人的呼吸作用进行的场所是哪?血液?细胞?并不是问气体交换场所. 而是发生化学变化的场所. 也就是葡萄糖和氧气发生变化的场所 接近开关和磁性开关的线径一般是多大的 谁能帮我总结下 ,最经常考的颜色气体沉淀 帮我总结下 希望能把初二用到的所有公式都发过来,如果完整会提高悬赏! 接近开关,磁性开关的功耗?如题,各种传感器的功耗怎么算?需要知道它的什么参数才能算出来?例如一台设备上共用了100个磁性开关,开关电源应选多大?还有关于设备功率估算问题,一台三相设 是什么污染了大气层 【化学问题】设计一个实验证呼吸作用产生二氧化碳. 铁盐 无色什么铁盐是无色,或极浅的颜色,而且浓度不是太低 大气层污染的危害 归纳初二物理每章的公式,每一个知识点的影响因素例如:电流的影响因素有导体的电阻和导体两端的电压 什么是断电延时继电器的常开触点(常闭触点)?断电延时继电器断电后,经过一段时间的延时,触点动作,这个没有疑问.那么断电延时继电器在线圈通电时的状态是常态还是非常态:即常闭触 如何减小大气层的污染 空气中含有什么成分 气缸感应线怎么接啊?是C型磁性触点开关 大气层污染有几层楼高 空气含有什么成分 气缸一般磁接近开关是多少伏的 哪些气体可以污染大气层 空气里含有哪些成分? 常开磁性接近开关接触磁铁是断电还是通电 汽车不但给人们带来了便利,还污染了空气,正应了那句古话( ).什么古话,急 空气中含多少成分? 初二物理人教版下册知识点概括 写污染的好的书籍以及里面比较好的句子 气缸上磁性开关的工作原理 细菌和真菌通过分解作用能促进自然界中的?等物质循环? “所有的河流都被污染了”英文的句子 气缸的磁性开关有什么作用那我们不用磁性开关是不是也可以,因为我们有电磁阀呀!是不是因为磁性开关使动作可以马上反应,不必设置时间? 生物分类表(动物、植物、病毒、真菌、细菌)有谁可以帮我制作一张生物分类表,要动物、植物、病毒、真菌、细菌五种的分类,而分类下也要有分类,如:动物——脊椎动物、无脊椎动物 描写河水污染的句子语句要优美 熟石灰是不是石灰水 细菌,真菌,动物,植物,病毒.他们的——和——各不相同打错了,是他们的——,——和——各不同 描写环境被污染的句子急! 熟石灰是不是就是澄清石灰水 动物、植物、真菌、细菌、病毒它们总称为什么,它们不断的从地球摄取什么、什么、什么等物质,进行生命活动摄取什么中有一个是空气 接近开关 怎么使用我一楼有个车库.我想用接近开关 常闭型,做个报警器接到家里.请问怎么接,车库的门是木头门. 气缸磁性开关有一个磁性开关,上面标有24伏电压,是什么意思,另外它只有两条线,指示灯怎么会亮.[两条线不就是个开关而已,怎么还有电压有指示灯呢] 在细胞结构上,真菌细胞不同细菌细胞的是具有( ) 关于接近开关的使用!我想知道,接近开关可以不可以反应物体接近的距离的大小,就是物体接近的远近,接近开关的输出能否反映出来呢?还有可不可以连续测量呢? 现有一气缸,其型号为不带磁性,此时如果在气缸上安装一磁性开关,磁性开关是否能够正常工作? 造成空气的污染的原因及危害是什么? 接近开关的使用接近开关是和电源连接 还是需要和其他什么配件 某无色透明溶液中可能含有下列离子K+,H+,Ba2+,OH-,CO32-,Cl-,NO3-且该溶液能与AL反应放出H2.取三只试管,分别加入少量反应后的溶液进行如下实验:1、一只滴加一定量KOH溶液,有白色沉淀产生.2、一 气缸运动的话用磁性开关好还是接近传感器? 空气受污染的原因是什么
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘