返回
沈阳锡超电脑培训机构
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理

小屏幕移动设备网页设计注意事项

466 2012-06-16 16:08:55

学习笔记

在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站。原因是这类网页起源于一个叫WAP的无线协议。
WAP能够运行于各种无线网络之上,如G、GPRS、CDMA等。WML是无线注标语言(Wireless-Makeup-language)的英文缩写。支持WAP技术的手机能浏览由WML描述的Internet内容。而如今的小屏幕移动设备,比如手机,都已经具备访问WWW的能力。其内置的浏览器,或是第三方浏览器大多是WebKit引擎。也因此没人再用WML组织WAP站点了,一般都是用HTML+CSS的方式。
在设计小屏幕移动设备网页时,你可能先得了解这么一些前提:
• 手机屏幕分辨率乱得一塌糊涂,什么分辨率都有!
• 我们的手机上网费用贼贵贼贵!
• UC浏览器拥有了贼大的市场占有率!
关于UC浏览器:
没错,不得不提它。谁叫它的市占率高呢。
对于UC浏览器而言,显然是非常适合我国国情的,它给用户大限度地节约手机上网流量。
基于行动应用,以及文本可读性,UC浏览器也体现了大字体、大行距等特性。
UC浏览器相对于其他手机浏览器而言,对HTML或CSS属性存在有特殊的、自定义的处理方式。
而所做的这些特殊处理,按目前来看,应该是继续保留较长一段时间,直到手机上网费用得到较大幅的下降。
在实际开发中,我们发现了UC浏览器对CSS存在一些“特殊照顾”:
• 不支持font-family属性,也就是说,在UC浏览器你只能看到一种字体;
• 不支持font-szie属性,也就是说,在UC浏览器你只能看到一样大小的字体;
• 不支持width、height、padding、margin、line-height属性,也就是说,在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔;
• 不支持固定像素的宽度,显示页面,也就是说,在UC浏览器始终将看到的是“满屏的”;
• 不支持浮动、层叠布局,float和position属性无效,也就是说,在UC浏览器你只能看到“左对齐”。
不过,个人仍然认为,如今建设小屏幕移动设备网页,完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说,我们设计支持UC浏览器的网页,而不是设计以UC浏览器为标准的网页。
这样做还有个好处,可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器,别过于纠结它!
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序,严重建议HTML编码人员留意各个HTML标签的先后顺序。
另外作一些小屏幕移动设备网页设计的相关补充:
• 网站头(header)
• 链接聚焦(hover)
各个浏览器均自定义了链接的hover样式,比如有的浏览器给链接聚焦时加了边框,有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。
• 鼠标事件(mouseover)
考虑到触摸屏操作,用户无法用手指进行over的操作,因此应禁止在应用于移动设备访问的网页使用mouseover

沈阳锡超科技咨询:

文中图片素材来源网络,如有侵权请联系删除
来源:沈阳锡超电脑培训机构
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图