background image

第二个

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