现在几乎所有人用触屏手机,随着智能手机的流行,触屏手机网站建设也在逐渐发展,那触屏手机网站建设技术主要是什么呢?对于触屏
技术,下面国互网对触屏手机网站建设技术做了下面四点总结:
一、设备
·分辨率与屏幕尺寸
·触屏机的交互特点
·性能
a. 分辨率是设计师做网站时首要考虑的问题,iphone/ipod touch目前有2种分辨率:480*320、960*640,屏幕的物理尺寸都是3.5英寸,Android由于是开源系统,生产商诸多,导致分辨率,屏幕尺寸非常多,但目前主流的分辨率为:480*320、800*480,根据以上情况推荐以480*320为标准设计,(客户端则推荐以大分辨率来设计,)同时考虑横屏情况下的自适应。
b. 触屏手机的特点是直接通过手指操作对象,因此需要为
设定一个理想的行高来满足手指的触摸点击。
来自*** 的一份关于触屏点击尺寸数据:
食指点击的间距约为7*7 mm,1mm间距。
拇指点击的间距约为8*8 mm,2mm间距, 当前推荐值为9mm,最小应不小于7mm。
列表选项之间距离最小应不小于5mm。
在设计过程中需要将毫米换算成像素,不同尺寸的屏幕分辨率换算的结果也不一样,换算方法详见(DPI和像素、厘米、英寸之间的关系和换算及CSS中的长度单位) 笔者认为:可按5mm为最低标准设计,使用率较高的可根据测试情况加大。
c. 手机的硬件和网络环境与PC相比还有较大差距,因此
需要高度优化页面性能:尽量控制页面文件大小,避免使用过多图片,规范html和css css压缩工具,尽量减少服务器请求,使用css spirit 某些特定css 可直接写在页面文件里。
二、系统
·UI style
·flash
1. iOS和Android OS在设计风格和交互上有较大差异,如果考虑一套UI同时适用多个平台,(网站可跨平台使用,跟APP相比减少了开发和维护成本)在设计时要避免过大的风格偏差和交互上的冲突及误导。Guidelines详见:
iPhone人机界面设计指南
Android人机界面指南
2. iOS不支持flash,JAVA,SVG,Android OS 支持flash10.1以上版本,建议使用gif动画。
三、浏览器
·功能条
·缓存
·HTML & CSS
·JavaScript
1. iphone浏览器自带有功能条,弥补了硬件上的功能缺陷。
这里特别介绍下iOS的一个特点,可将网站添加到桌面,并生成一个APP图标:
***图片为方形,尺寸57px*57px,iphone4 114*114。
2. 这里将缓存分为组件缓存和页面缓存,组建缓存是指网站元素:图片、CSS、JavaScript等,页面缓存是整个页面作为单独实体来存储,在页面设计开发时要注意组件和页面不超过浏览器的缓存大小:
3.在PC端上显得遥遥无期的html5 和css3在移动终端率先登场,下面介绍几个实用的css3
渐变:webkitgradient(linear, left top, left bottom, color-stop(0.3, rgb(255,255,255)), color-stop(0.75, rgb(239,242,252)));
圆角:-webkit-border-top-right-radius: 4px;
更多资讯请登录东莞市蕃茄网络科技有限公司：***