HTML5 Web App开发注意事项.docx
- 文档编号:10215608
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:7
- 大小:18.46KB
HTML5 Web App开发注意事项.docx
《HTML5 Web App开发注意事项.docx》由会员分享,可在线阅读,更多相关《HTML5 Web App开发注意事项.docx(7页珍藏版)》请在冰点文库上搜索。
HTML5WebApp开发注意事项
HTML5及CSS3新增加功能
HTML5新增加的常用标签
article
比如来自一个外部的新闻提供者的一篇新的文章,或者来自blog的文本,或者是来自论坛的文本。
亦或是来自其他外部源内容。
audio
canvas
command
datagrid
datagrid作为树列表来显示。
datalist
与input元素配合使用,就可以制作出输入值的下拉列表。
dialog
details
header
nav
progress
可以使用
section
比如章节、页眉、页脚或文档中的其他部分。
video
CSS3新增加的属性
名称
语法
border-image
border-image:
none|
[stretch|repeat|round]{0,2}
border-radius
border-radius:
none|
box-shadow
box-shadow:
background-origin
background-origin:
border|padding|content
background-clip
background-clip:
border-box|padding-box|content-box|no-clip
background-size
background-size:
[
opacity
opacity:
text-shadow
text-shadow:
none|
transition
transition:
propertydurationtiming-functiondelay;
HTML5WebApp开发注意事项
1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
第一个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、放弃CSSfloat属性
在项目开发过程中可以会遇到内容排列排列显示的布局,建议你放弃float,可以直接使用display:
block;
4、利用CSS3边框背景属性
按钮有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。
-webkit-border-image就个很复杂的样式属性。
5、块级化a标签
请保证将每条数据都放在一个a标签中,为何这样做?
因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。
6、自适应布局模式
在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。
为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、websafarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
7、学会使用webkit-box
webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。
8、如何去除Android平台中对邮箱地址的识别
iOS提供了一个meta标签:
用于禁用iOS对页面中电话号码的自动识别。
在iOS中是不自动识别邮件地址的,但在Android平台,它会自动检测邮件地址,当用户touch到这个邮件地址时,Android会弹出一个框提示用户发送邮件,如果你不想Android自动识别页面中的邮件地址,你不妨加上这样一句meta标签在head中
9、如何去除iOS和Android中的输入URL的控件条
能否让我们的webapp更加像nativeapp,我不想让用户看见那个输入url的控件条?
答案是可以做到的。
我们可以利用一句简单的javascript代码来实现这个效果
setTimeout(scrollTo,0,0,0);
请注意,这句代码必须放在window.onload里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
10、iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。
这个技巧仅适用iOS对于Android平台则无效。
11、iOS中如何禁止用户保存图片\复制图片
我们在第13条技巧中提到元素的-webkit-touch-callout属性,同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮,这样用户就无法保存\复制你的图片了。
12、iOS中如何禁止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
13、iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两个属性是未定义的,为什么呢?
因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获取滚动条的值呢?
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
14、如何解决Android2.0以下平台中圆角的问题
如果大家够细心的话,在做wap站点开发时,大家应该会发现android2.0以下的平台中问题特别的多,比如说边框圆角这个问题吧。
在对一个元素定义圆角时,为完全兼容android2.0以下的平台,我们必须要按照以下技巧来定义边框圆角:
1)-webkit这个前缀必须要加上(在iOS中,你可以不加,但android中一定要加);
2)如果对针对边框做样式定义,比如border:
1pxsolid#000;那么-webkit-border-radius这属性必须要出现在border属性后。
3)假如我们有这样的视觉元素,左上角和右上角是圆角时,我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:
5px;然后再依次的覆盖左下角和右下角,-webkit-border-bottom-left-radius:
0;-webkit-border-bottom-right-border:
0;否则在android2.0以下的平台中将全部显示直角,还有记住!
-webkit这个前缀一定要加上!
15、如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的,但有一天如果你发现你的页面在android中显示的并不是自适应的时候,首先请你确认你的head标签中是否包含以下meta标签:
如果有的话,那请你再仔细的看清楚有没有这个属性的值width=device-width,如果没有请立即加上吧!
16、如何解决iOS4.3版本中safari对页面中5位数字的自动识别和自动添加样式
新的iOS系统也就是4.3版本,升级后对safari造成了一个bug:
即使你添加了如下的meta标签,safari仍然会对页面中的5位连续的数字进行自动识别,并且将其重新渲染样式,也就是说你的css对该标签是无效的。
我们可以用一个比较龌龊的办法来解决。
比如说支付宝wap站点中显示金额的标签,我们都做了如下改写:
none;padding: 0;border: 0;”>95009.00
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 Web App开发注意事项 App 开发 注意事项