分类目录归档:手机与wap

20个实用的webApp前端开发技巧


转自:http://www.candoudou.com/archives/155

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。

开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。

WebApp与Native App有何区别呢?

Native App:

1、开发成本非常大。

一般使用的开发语言为JAVA、C++、Objective-C。

2、更新体验较差、同时也比较麻烦

每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个恶心的提示)。

3、非常酷

因为native app可以调用IOS中的UI控件以UI方法,它可以实现WebApp无法实现的一些非常酷的交互效果

4、Native app是被Apple认可的

Native app可以被Apple认可为一款可信任的独立软件,可以放在Apple Stroe出售,但是Web app却不行。

Web App:

1、开发成本较低

使用web开发技术就可以轻松的完成web app的开发

2、升级较简单

升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉

3、维护比较轻松

和一般的web一样,维护比较简单,它其实就是一个站点

Webapp说白了就是一个针对Iphone、Android优化后的web站点,它使用的技术无非就是HTML或HTML5、CSS3、JavaScript,服务端技术JAVA、PHP、ASP。

当然,因为这些高端智能手机(Iphone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时,若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话,这也就失去了WEBAPP的本质意义了,且有些效果也无法实现的,所以在此又回到了我们的主题–webapp的布局方式和技术。

在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解,那现在就开始往下阅读吧……

1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用

1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

2 <meta content=”yes” name=”apple-mobile-web-app-capable” />

3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

4 <meta content=”telephone=no” name=”format-detection” />

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;

第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码

2、HTML5标签的使用

在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性

在项目开发过程中可以会遇到内容排列排列显示的布局(见下图),假如你遇见这样的视觉稿,哥建议你放弃float,可以直接使用display:block;

4、利用CSS3边框背景属性

这个按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

5、块级化a标签

请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。

6、自适应布局模式

在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。

7、学会使用webkit-box

上一节,我们说过自适应布局模式,有些同学可能会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。

8、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中1 <meta content=”email=no” name=”format-detection” />

9、如何去除iOS和Android中的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你:能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?

答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果

1 setTimeout(scrollTo,0,0,0);

请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。

10、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备,也想实现像某些客户端那样:只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你:别想了!在移动版的webkit中做不到!

至少Apple webapp API已经说到了:我们为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),所以我们禁止开发者阻止浏览器的orientationchange事件,看来苹果公司的出发点是正确的,苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件,那Android呢?对不起,我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件,但是在Android平台,确实也是阻止不了的。

11、如何检测用户是通过主屏启动你的webapp

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能,按下iphoneipodipod touch底部工具中的小加号,或者ipad顶部左侧的小加号,就可以将当前的页面添加到设备的主屏,在设备的主屏会自动增加一个当前页面的启动图标,点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工具条,这样你的webapp就更加像是nativeapp了,还有一个区别是window对像中的navigator子对象的一个standalone属性。iOS中浏览器直接访问站点时,navigator.standalone为false,从主屏启动webapp时,navigator.standalone为true, 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。在Android中从来没有添加到主屏这回事!

12、如何关闭iOS中键盘自动大写

我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

13、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

14、iOS中如何禁止用户保存图片\复制图片

我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。

15、iOS中如何禁止用户选中文字

我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

16、iOS中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?

通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

17、如何解决盒子边框溢出

当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

18、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话,在做wap站点开发时,大家应该会发现android 2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。

在对一个元素定义圆角时,为完全兼容android 2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:

1\-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);

2\如果对针对边框做样式定义,比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。

3\假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角,-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角,还有记住!-webkit这个前缀一定要加上!

19、如何解决android平台中页面无法自适应

虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:

1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” />

如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。

1 <meta name=”format-detection” content=”telphone=no” />

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:

1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>


一位高人解答的关于开启“数据漫游”才能上网的解答



大家知道原理就行了,没必要计较系统版本,因为这帖是转自其它机型的论坛!

正文:

大家都知道了,刷了2.1后,想用 手机 网络上网,必须打开“数据漫游”选项,很多人由于害怕出现高额流量费,不敢用手机上网了。其实完全没必要。

这个数据漫游,与我们平时理解的漫游不是一回事。

老外的所谓漫游,指的是你使用的移动网络,不是提供给你手机卡的移动运营商。比如,你的手机卡(手机号码)是中国移动的,而你却连接中国 联通 的GSM/GPRS网络进行通话和上网,这才是老外所说的漫游。

当然,目前移动和联通不提供这样的漫游服务,这不是技术层面的问题,而是运营策略的事,我只是举个例子而已。

正因为移动和联通不提供这样的漫游服务,所以,尽可大胆勾选“数据漫游”,尽情上网,在我朝,你是不可能漫游的。当然如果你在国境线附近,不小心连接了万恶的资本主义运营商,那可能真的会产生高额漫游费用的。

———————

补充一点:为啥不管国行水货刷了2.1需要勾选数据漫游吗?因为机子已经是水货的信号基带(即在国内的移动公司设备识别上我们的信号发射接受模块是外国的版本了,)

刷2.1都是伪装为外国发行的版本(主要是基带raido是意大利版本或者美国ATT)才刷上的,意大利的机型在天朝当然水土不再服。而且其他机子的水货入了大*陆 也要打开那个才上的了网的。比如我同学的I5700。刚开始不能上  我手动在拨号界面输 *#*#4636#*#*并且进入 工程 模式  把最后的DNS  选为allowed    在这里翻过来就勾选数据漫游的另外一种做法。。。。这也算是一点原理上的扫盲了 。希望对大家有点帮助

———————-

LZ再补充:

上面那段话是某人在心灵版主补充的,万分感谢。

可是国内的网络环境实际上比想象的复杂得多。有些人不需要勾选数据漫游也能上网,有些人则不行,这个问题困扰了我很长 时间 。现在终于研究出来点眉目。

按国际标准,每个运营商的本地网络都会分配一个唯一的网络识别号,有些人可能知道,中国移动是460-00,中国联通是460-01,手机就是通过这个识别号来识别运营商的。

但是,在我朝却有例外,中国移动拥有460-00、460-02、460-07这三个识别号,中国联通拥有460-01、460-06这两个识别号,中国电信拥有460-03。也就是说,移动和联通都分别运营着多个移动网络。

那么具体你使用手机时连接的是哪个网络呢?很不幸你没法做主,这是运营商根据手机号段给你分配的。

举个例子,

我自己的手机, 北京 移动全球通的号,连接的网络永远是460-00,我用意大利的radio,只要设置了cmnet apn,我不用勾选数据漫游就能上网。

我 朋友 的手机, 重庆 移动神州行的号,来到北京,跟我在同一间房子里,连接的网络却是460-02,也是意大利的radio,即使设置了cmnet apn,无论apn中的网络标识设置成460-00还是460-02,都必须勾选数据漫游才能上网。

所以我猜想,中国移动根据你手机的号段给你分配其中一个网络用于通话,但GPRS/EDGE上网则必须通过460-00网络,如果分配给你的网络不是460-00,你就必须勾选数据漫游。联通用户是什么策略我不太清楚。

其实这应该是意大利radio的一个小缺陷,ME600国行中的radio完全没有数据漫游的问题,估计是moto专门针对中国的网络环境优化过的。

通过万能的股沟,我查到了些手机号段对应移动网络的资料,仅供参考:

中国移动:

0:159 (网络编号460-02)

1:158 (网络编号460-02)

2:150 (网络编号460-02)

3:151 (网络编号460-02)

4:1340-1348 (网络编号460-02)

5:135 (网络编号460-00)

6:136 (网络编号460-00)

7:137 (网络编号460-00)

8:138 (网络编号460-00)

9:139 (网络编号460-00)

A:157 (网络编号460-07)

B:188 (网络编号460-07)

C:152 (网络编号460-02)

D:147 (网络编号460-07)

E:187 (网络编号460-02)

中国联通:

130 (网络编号460-01)

131 (网络编号460-01)

132 (网络编号460-01)

155 (网络编号460-01)

156 (网络编号460-01)

186 (网络编号460-06,WCDMA)

中国电信:

133 (网络编号460-03)

153(网络编号460-03)

189 (网络编号460-03)

wap开发



//开发语言

1.wap1.x wml/wmlscript

2.wap2.0 XHTML MP / WCSS

3.HTML5手机版

    3.1.ios自带浏览器

    3.2.android自带浏览器

    3.3.windows phone7自带浏览器

    3.4.android平台的UC8.0浏览器.

    3.5.pad网页版采用三栏样式,支持横屏、竖屏自适应浏览


//手机应用


//平台


//趋势

1.以Web为中心的HTML5应用模式有助于弥补移动终端相对于 PC 和笔记本电脑处理能力较弱的劣势,并在一定程度上为应用的爆炸式增长打造大量的开发者基础,从而提供强大动力

//参考资料

1.http://wenku.baidu.com/link?url=nE6EoYbnTQgJfmDi_I30CWMMqx0juyncNavpGyiRqVG-D3XwLuZUPG9SdVjbfTYFcZTeNUl7o5pOClDqBdFujKkvdvlseLg7v3NM_PbeA1O

2.http://wenku.baidu.com/link?url=n3Ab3Hgi9crpk-XX4o4eZCJy69TgiEdrrUjxSJwUv-J7a_PdYryO511Avk4kdAseKXy62DJK21eL2HHIni00f4MneKTZFG7I40tXP1QFPWa

3.http://www.techweb.com.cn/internet/2011-11-03/1114128.shtml

WAP 2.0介绍和使用规范


转自:http://wuhua.iteye.com/blog/382172

—— XHTML MP and WCSS


一、WAP的常识(省略) 
二、XHTML MP
(一)XHTML MP 介绍
XHTML MP(eXtensible HyperText Markup Language Mobile Profile)
WAP2.0
与WCSS(WAP CSS /WAP Cascading Style Sheet)配套使用
是XHTML的子集
XHTML Basic (XHTML子集)+另外的一些XHTML的元素和属性
WAP浏览器与互联网之间
以前WAP网站(WML and WMLScript )
更多的展示表现(presentation control )
(一)XHTML MP 介绍
优势:开发的站点可以在WEB和无线上都可以使用,也可以用任何Web浏览器访问WAP2.0应用
向后兼容:XHTML MP / WCSS 和 WML / WMLScript 
(二)无线标记语言发展
HTML:WAP发展的首要任务——移动电话,PDA等访问互联网。WAP standard (WML and XHTML Mobile Profile) 类似HTML
WML(Wireless Markup Language) 1.x:WAP 1.x 规范中规定的标记语言,无线设备的第一个标记语言。Openwave、Nokia 和 Ericsson 很早都有自己的标记语言。WML规范是WAP Forum(97)创建的。而现在,很多的WAP站点依然使用的是WML。
XHTML:结构比HTML更简洁和严格。这对于无线设备(例:移动电话)很重要,对于有限的处理能力。
XHTML Basic :是XHTML的一个简化版本。为处理
        能力和性能有限的设备设计的(移动电话,PDA,呼机等)


(二)无线标记语言发展
但是不包含XHTML特性。例如CSS,frames和Scripting。是由W3C定义的。
XHTML MP: 在WAP2.0说明中指定的官方标记语言。WAP Forum 基于 XHTML Basic创造,并从XHTML的完整版本中增加了一些元素和属性。例如<i>,<b>,<small>,<big>和<hr>。XHTML MP支持一个简单的CSS版本,即WCSS/WAP CSS。
WCSS/WAP CSS: CSS2的一个简化版本,增加了WAP特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。
WML2.0: WAP站点开发者不需要顾虑WML2.0。WML2.0向后兼容,并且对于WAP站点开发者还不可用。

(三)XHTML MP的优点
最大优点:开发者可用相同的技术开发适用于WEB和WAP的站点。
有HTML、XHTML、CSS基础即可入门。
同样的开发工具可以用来开发WEB和WAP站点。
开发过程中一般的WEB浏览器可以浏览你的WAP站点。
HTML/XHTML页面可以通过较小的修改成XHTML MP,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出最大)。
支持WCSS。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的WCSS文件即可。
更多的表现控制。



(四) 不支持的WML 特性
XHTML MP 不支持<deck>和<card>标签。
       在XML中,一个文件可以包含一个或更多的card,所有的card组合成一个deck,并在无线设备中一同被下载。WAP浏览器每次只显示一个card,可以通过锚链接访问其他的card。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性,可以使用multipart messages(多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。 
XHTML MP 不支持<timer>标签
       <head> &nbsp;&nbsp;<meta http-equiv=”refresh” content=”10;URL=http://www.planabc.net/” /> </head>
       <meta>元素10秒后告诉WAP浏览器URL。
       注意点:WML timer 仅当进入card,而HTML refresh timer当进入XHTML MP页面。
(四) 不支持的WML 特性
3.   XHTML MP 不支持事件。
       WML支持四个事件(ontimer,onenterbackward,onenterforward,onpick),除ontimer其他事件无法模拟。如要使用,需使用WML1.X。
4.    XHTML MP 不支持变量。
       在XML,可以声明变量,并赋值,拥有全局作用域。可以在任何的deck和card中使用。XHML MP放在服务器端处理(必须发送并保存)。
5.    XHTML MP 不支持客户端脚本。
         在XML,你可以使用客户端脚本(WMLScript)。JavaScript的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本(ECMAScript MP),支持所有的WMLScript功能。

(四) 不支持的WML 特性
6.   XHTML MP 不支持可编程序软键(Programmable SoftKeys)。
       WML的一个最大特征。通过<do>标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性:
       <a accesskey=”1″ href=”part1.xhtml”>XHTML MP Tutorial Part 1</a
            WCSS中的-wap-accesskey属性也可以用来定义:a.wcss_class_1 {-wap-accesskey: 1}
7.    XHTML MP 不支持<u>标签。
       在XML,<u>用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。
8.    XHTML MP 不支持Input框的format属性。
         在XML,可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性,语法一致。比如限制5个数字字符:input {-wap-input-format:”5N”}

(四) 不支持的WML 特性
9.   XHTML MP 不支持锚链接传输数据。
       <p> &nbsp;&nbsp;姓名:&nbsp;&nbsp;<input name=“name”/><br/> &nbsp;<anchor> <go method=“get” href=“yuanxin.php”><postfield name=“name” value=“$(name)”/></go> &nbsp;提交&nbsp;&nbsp;</anchor> </p>
       <form action=“yuanxin.php” method=“get”> &nbsp;       <p>姓名:&nbsp;&nbsp;&nbsp;&nbsp;<input name=“name”/><br/><input type=“submit” value=“提交”/></p> </form>
(五) 语法规则
标签必须完全闭合。
标签和属性必须小写。
属性值必须包含在引号标记内。
不允许无属性值存在。
标签必须完全嵌套。
(六)MIME 类型和文件扩展名
MIME类型: application/vnd.wap.xhtml+xml、application/xhtml+xml 、text/html。
动态生成MIME类型。获得HTTP请求中的accept header信息。
文件扩展名:.xhtml、.html、.htm

(七)文档结构
必须包含<html>, <head>, <title>和<body> 元素。 

<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
       <title>Hello world</title>
</head>
<body>
       <p>Hello world. Welcome to taobao.com.</p>
</body>
</html> 

(七)文档结构
XML声明和字符编码:<?xml version=”1.0″ encoding=”UTF-8″?>
       UTF-8/16编码可省略。XML声明也不是必须的,但如果忽略在许多WAP浏览器中出错。
必须有DOCTYPE声明。在XML声明和<html>元素之间。
<html>、<head>、<link>、<title>、<body>
<p>元素,align属性已经去除,可以通过WAP CSS的text-align属性来设置。
(八)通用的元数据
使用<meta/>标签,包含在<head>内
WAP浏览器如果不理解则忽略。
比如添加作者:<meta name=”author” content=“yuanxin”/> 
Cache Control:<meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期:
       <meta http-equiv=”Cache-Control” content=”no-cache”/> 
       <meta http-equiv=”Cache-Control” content=”max-age=0″/>
        注意点:与设备相关。一些使用不相的方法,一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的
       HTTP头。也可应用于图片的缓存。
(八)通用的元数据
周期性刷新。必须配合使用。不是所有浏览器都支持。
       <meta http-equiv=”Cache-Control” content=”no-cache”/> 
       <meta http-equiv=”refresh” content=”15;URL=yuanxin.xhtml”/> 
(九)常用标签介绍
注释:<!– — >,和HTML和WML1.X相同。
换行:<br/> ,和HTML和WML1.X相同。
水平线:<hr/>。不能包含在<p></p>标签之内。
标题:<h1>-<h6>(不同的大小和样式),有些设备看起来一样的。
       
(九)常用标签介绍
字体样式:XML可以使用标签来改变字体样式( <b>、<i>、<small>、<big>等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。 WCSS 控制字体格式。
与格式化文本:在XHTML MP中,标签间空白不显示,此外,段落中2个或更多的空白只显示一个,如果想保持文字的格式,可使用<pre>。 
列表:<ul>、<ol>、<li>。对于<ol>元素,可以用属性 start 指定数字开始的序列。还可以用WCSS来做更精确的控制。
显示图片:<img>标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持,显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度

(九)常用标签介绍
除了老的WBMP图片格式,WAP2.0还支持WEB上的图片格式(gif, jpg和PNG),但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过accept HTTP header判断设置。 
         关于大图片的发布:很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。
       优化图片:1、用制图软件按比例缩小图片;2、如果是gif图片,减少颜色,但降低了图片质量,权衡。3、如果是jpg图片,保存一定的压缩比例,依然是权衡。
       使用multipart messages,先下载的XHTML MP文档,
(九)常用标签介绍
后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。
表格:创建表格,需要使用<table>、<tr>、<td>标签,默认表格没有边线。属性有rowspan和colspan。
锚链接:一般用在导航。标签为<a></a>。属性href定义指定的URL。当前页面位置的跳转:先设置目标链接,通过id属性设置;再设置锚链接的URL为#id名称。
       对锚链接设置快捷键:<a>标签的accesskey属性,有效的值为:*,#,0-9。还可以用-wap-accesskey设置。
(九)常用标签介绍
选择列表:选择列表使用<select>标签,包含一个或更多的<option>标签。<select>标签的name属性定义选择列表的名字。name用来取得被选择的item的值(option的value属性定义)。
       1.   多重选择列表:Option的selected属性用来设置默认的option。如果想设置多重选择列表,可使用<select>标签的multiple属性,只有一个唯一值‘multiple’。
       2.   Option分组:使用<optgroup>标签,label属性定义option组的名称。
(九)常用标签介绍
选择列表
(九)常用标签介绍
输入元素:Text field、Password fireld、Checkbox、Radio button、Hidden field。通过<input>元素创建。传输数据到服务器,<input>元素必须和<form>一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称,方便取得用户数据。
       <input type=”text” name=“taobao” maxlength=”16″ value=“yuanxin”/> 
       input { -wap-input-format: “10N”} 
       <input type=”password” name=“taobao”/> 
       <input type=”checkbox” name=“taobao” value=“yuanxin” checked=”checked”/> 
       <input type=”radio” name=“taobao” value=“yuanxin” checked=”checked”/> 
       <input type=”hidden” name=“taobao” value=“yuanxin”/> 

(九)常用标签介绍
13.   form元素:<input>、<select>等元素不能直接包含在form元素下,XHMTL MP标准规定必须有块级元素。如果有non-ASCII字符,需使用POST方法来避免编码问题。
       <form  method=”get” action=“yuanxin.asp”>        <p> &nbsp;&nbsp;&nbsp;       &nbsp;       <input …> &nbsp;&nbsp;&nbsp;&nbsp;              <select …>        </p> </form> 
14.  提交按钮:所有的表单都必须包含一个提交按钮。<input>元素用来创建一个提交按钮。而type属性被定义为’submit’。
       <input type=”submit” value=”OK”/>        
(九)常用标签介绍
15.   重置按钮:并不是必须的。<input>元素用来创建一个重置按钮。而type属性被定义为’reset’。
       <input type=”reset” value=”Default”/>
16.   Div和Span。  

三、WCSS/WAP CSS
(一)WCSS 介绍
WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS(WAP Cascading Style Sheet )
是CSS2的子集+一些WAP特有的扩展
目的:定义文档的风格和布局,从文档内容中分离。
重要性:不同的手机设备有多样的特征,比如屏幕大小。
WML不支持WCSS
W3C CSS Mobile Profile和WAP CSS 不同。
(二)使用WCSS的优势
主要:学习成本降低,可用相同的开发工具,可用WEB浏览器浏览。
表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理(PC、PDA、手机);降低维护成本(新手机);改变视觉和布局仅需CSS;重复使用CSS;便于工作细分。
比WML更好的控制表现:可以定义元素的color,font,background,border,margin,padding等属性。
移动设备第一次访问站点下载样式(Cache)。
使用外部WCSS,XHTML MP的文档大小变小,提高下载时间。

(三)使用WCSS的劣势
不同的WAP浏览器对WCSS的支持不同,可能一个属性在这个WAP浏览器上支持,而另外一个不支持。
外部的WAP CSS可能增加第一次访问页面的请求时间。原因:外部WCSS不存在于手机的Cache,必须从服务器下载;XHTML MP文档和外部的WCSS下载是不同的请求,增加了服务器压力;如果使用一个WCSS定义WAP站点的所有表现,该文件大小可能很大;WAP浏览器需要解析WCSS到XHTML MP文档。
(四)MIME 类型和文件扩展名
MIME类型: text/css。
文件扩展名:.css

(五)WCSS的语法规则
WCSS声明:selector {property: property_value} 
多个属性允许的,用’;’分隔。
多个选择器也是允许的,用‘,’分隔。
注释:/*orz*/,WAP浏览器将忽略这些内容。
(六)如何在XHTML MP文档中应用
链接外部WCSS(推荐),放置在文档的head部分,用style属性定义WCSS样式 
<link href=“url” rel=“stylesheet” type=“text/css”/>,可以多个,无需修改rel和type属性。
<style type=”text/css”> &nbsp;some WCSS statements </style> 
<hr style=”color: blue”/>
(七)不同的选择器
类型选择器:h1 { font-style: italic} 元素名称必须小写。  
Class选择器: .class { color:blue} 对应标签的class属性,还可以联合元素名称使用 h1.class {color:blue}。
ID选择器:#id {color:red} 对应标签的id属性也可联合元素名称。
通用选择器:* { color:blue} ,所有的标签。注意:在某些WAP浏览器上会使样式渲染变慢。(建议不要用)
(八)常用的属性值
长度:%,px,em,ex,cm,mm,in,pt,pc(值和单位之间不允许有空格:margin-top:1px而不是margrin-top:1 px)。  
颜色:rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。
URL:ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。
(九)字体和文本属性
字体名称:p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
字体大小:p {font-size:12px},也可以用xx-small,x-samll,small,medium,large,x-large,xx-large
字体样式:斜体、粗体和下划线(font-style,font-weight和text-decoration)。
设置文本对齐:text-align和float。WAP中float(left,right,none)常用在img和table标签
(十)列表属性
改变无序列表的图标(list-style-type ):默认disc,其他值:circle,square,none。可以应用在ul和li元素上。
改变有序列表的次序:默认decimal,其他值:upper-alpha(A),lower-alpha(a),upper-raman(I),lower-raman(i),none
3.     使用图片文件作为小图标:list-style-image: url(bullet.gif) 。注:Openware WAP浏览器本地保存了一些icon,可以使用这些作为小图标,例如:ul {list-style-image: localsrc(“rightarrow1”)} 
(十)列表属性
(十一)颜色属性和border属性
设置前景和背景颜色:color、background-color属性。
设置border样式:border-style(border-top-style等)属性,值有很多,但只有none和solid被WAP浏览器广泛支持。table {border-style: solid} 
设置border宽度:border-width(同上)属性,值为数值,还接受thin、medium和thick。注:值设置border-width,border并不可见,必须设置border-style非none值。
设置border颜色:border-color(同上)属性。注意点同上。
设置border属性的快捷方式:table {border: 2px solid black} 
       顺序自由。
(十二)WAP特有的CSS扩展
快捷键:-wap-accesskey ,用来指定XHTML MP元素的快捷键。
Input:定义文本框是否可以留空,什么类型,可以输入多少字符
Marquee:在屏幕上滚动一些内容。
(十二.1)WCSS快捷键扩展
给元素定义快捷键:-wap-accesskey属性
可用的属性值*,#,0,1,2,3,4,5,6,7,8,9
       input.wcss_class {-wap-accesskey: 4} 
直接定义*和#违反CSS2语法。需要使用Unicode转义字符2a和23。但是有些WAP浏览器(Sony Ericsson WAP 浏览器 )要求使用2a 和 23,一些(Openwave 手机浏览器) 要求使用* 和#。
与元素的accesskey属性同效,如同时定义,显示该属性值。
只用于四个元素a, input,label,textarea,其他定义也无效。
       


(十二.2)WCSS输入扩展
由两个属性组成:-wap-input-famat和-wap-input-required,对应于WML中<input>元素的format(定义类型和字符数量)和emptyok(是否可以留空)属性。
早些的移动设备上WAP浏览器不支持,但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性,建议WCSS和WML都使用。
       <input type=”text” format=”N” style=’-wap-input-format: “N”‘/> 
控制文本框的类型和字符数量:-wap-input-format。需应用在<input type=“text”>, <input type=“password”>和<textarea> 标签上,如应用在其他标签无效。格式字符(大小写敏感):a(小
       写字母或符号),A(大写字母或符号),n(数字或符号)

(十二.2)WCSS输入扩展
N(数字),x(小写字母或数字或符号),X(大写字母或数字或符号),m(任何字符,默认小写字母输入模式,可换大写模式),M(任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分Openwave 手机浏览器不支持单引号,建议使用双引号(<input type=“text” style=‘-wap-input-format: “N”’/> )
       -wap-input-format: “2N” (最多两个数字)    -wap-input-format: “NN” (两个数字)   -wap-input-format: “*N” (无限个数字)
       -wap-input-format: “A*a” (第一个大写字母或符号,0-n个小写字母或符号)  -wap-input-format :“*M”(默认)
       格式字符前使用数字或*的原则:1、只允许一次;2、在最后




(十二.2)WCSS输入扩展
如果值语法错误,则WAP浏览器忽略该属性。
       也可以包含转义字符:’’在WCSS中是特殊字符,使用’\’。
控制文本框是否可以留空:-wap-input-required(值为:false和true ),帮助控制文本框是否可以空白。使用元素同上。
       当-wap-input-format和-wap-input-required冲突时,以required优先。



(十二.3)WCSS Marquee扩展
可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。
包含四个属性和一个属性值:-wap-marquee属性值(display属性的值),-wap-marquee-dir属性(指定marquee的方向,值:ltr,rtl-默认),-wap-marquee-loop属性(指定marquee重复的时间,infinite永远,大多数默认为1),-wap-marquee-speed属性(指定marquee的速度,值:slow,normal-默认,fast),-wap-marquee-style(指定marquee在屏幕上如何滚动,有三个值:scroll-默认,slide,alternate)
              


(十二.3)WCSS Marquee扩展

              


二、WAP2.0设计原则
WAP2.0设计原则
设计站点前的准备工作
       界面设计、挑选核心服务、WAP设备特性统计(浏览器等)
关注导航模型
       一致易学的导航模型。简洁精确且快速的信息。尽可能减少输入(考虑选择列表、复选框或单选按钮等。-wap-input-format:*N;避免模式转换。首字母。 )
设计导航层次
       导航模型一致、少用‘返回’链接、避免深度太深(4-5)、返回首页或目录
              


WAP2.0设计原则
考虑小尺寸屏幕的设计
       确保内容可见、<title>少于14个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性(1-3)、充分利用空间(图文)、避免过多使用文本样式属性、使用短小精确的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。
保持较短的文档大小:内存有限,不支持WML的多card,使用锚链接等
       不要包含长注释、去除缩进或空格、尽量少用id和class
6.       用户任务流流畅和图片合理使用
       图片不是用户目的尽少使用、避免使用大表格。
              


WAP2.0设计原则
7.       页面上提供足够信息
       首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。
为用户操作提供信息反馈
       对用户操作、错误和问题情况提供正确的反馈。
9.       尽可能减少图片数量和减小图像容量大小
       每张图片都是一个请求,降低页面显示的速度,且内容可能重排序,占用时间和资源,全站规划相同图片。
定义图像的高度和宽度属性
       定义了预占位,改善用户体验,
              


WAP2.0设计原则
11.       谨慎使用表格
       单元格宽度使用绝对宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。
12.       考虑添加样式定义选项
       权衡!
使用Unicode字符编写XHTML MP内容       
进行可用性测试 

 

 

 
附录
1.   常用WAP模拟器
WinWAP、OpenWave、Opera

2.   常用WAP网站
www.wapforum.org
www.spforum.net
www.csdn.com
www.blueidea.com

用谷歌浏览器来当手机模拟器


转自:http://blog.s135.com/chrome_phone/

很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。




  谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器。在Windows的【开始】–>【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:


  谷歌Android:


chrome.exe –user-agent=”Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1″


  苹果iPhone 4:


chrome.exe –user-agent=”Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405″


  苹果iPad 2:


chrome.exe –user-agent=”Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405″


  诺基亚N97:


chrome.exe –user-agent=”Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124″


  试一试,分别用Android、iPhone、诺基亚访问http://www.163.com/http://blog.s135.com/http://www.google.com.hk/http://3g.qq.comhttp://t.sina.cn这些3G手机网页,看看有什么不同。


  更多款手机的User-Agent:http://www.zytrax.com/tech/web/mobile_ids.html


  10月11日备注:如果想切换回普通浏览器模式,关掉所有Chrome浏览器,重开即可。如果不想关闭浏览器,切回普通浏览器模式,则访问:


chrome.exe –user-agent=”Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.77 Safari/535.7″