• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!

手机网站前端开发布局技巧

2015-06-11 20:14:48   来源:叶景网络
    在 此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解, 那现在就开始往下阅读
    1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
    <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
    <meta content=”yes” name=”apple-mobile-web-app-capable” />
    <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
    <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就个很复杂的样式属性,你一开始可以无法快速理解,建议你阅读一篇关于border-image的文章
    5、块级化a标签
    请保证将每条数据都放在一个a标签中,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。
    6、自适应布局模式
    在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式 (支付宝 采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
QQ客服不加好友直接打开聊天窗口 QQ客服不加好友直接
网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2.0网页
手机wap页面前端的一点体会 手机wap页面前端的
常用的文本符号以及非主流符号大全 常用的文本符号以及
关注排行RANKING
1

QQ客服不加好友直接打开聊天窗口

QQ客服不加好友直接打开聊天窗口 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

2

网页手机wap2.0网页布局 页面尺寸设置

网页手机wap2.0网页布局 页面尺寸设置 网页手机wap2 0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以...

3

手机wap页面前端的一点体会

手机wap页面前端的一点体会 手机端的html页面就像回到了最早的纯文本时代~~ 没有JS,只有单纯的div+css~容易上手,...

4

常用的文本符号以及非主流符号大全

常用的文本符号以及非主流符号大全 在word文档工具栏的符号那里提供了许多文本符号,但我还是觉得不够用,于是我从网上搜寻...

5

input /button链接的几种方法

input /button链接的几种方法 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

6

用JavaScript怎么实现页面跳转

用JavaScript怎么实现页面跳转 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

7

从GB2312(UTF-8)页面获取表单转换...

从GB2312(UTF-8)页面获取表单转换成UTF-8(GB2312) 由于我的网站编码是GB2312,而另一个网站(不是我的)编码却是UTF-8, ...

8

收藏本站和设为主页代码

收藏本站和设为主页代码 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

9

textarea 滚动条属性设置

textarea 滚动条属性设置 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...