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

最新推荐文章于 2016-06-11 14:50:06 发布

spring21st

最新推荐文章于 2016-06-11 14:50:06 发布

阅读量873 手机开发文章标签：浏览器手机 html wap css webkit

本文链接：https://blog.csdn.net/spring21st/article/details/5943532

手机开发专栏收录该内容

55 篇文章 0 订阅

在过去，小屏幕移动设备网页通常也被称之为WAP页，或WAP站。
原因是这类网页起源于一个叫WAP的无线协议。
WAP能够运行于各种无线网络之上，如GSM、GPRS、CDMA等。WML是无线注标语言（Wireless Makeup language）的英文缩写。支持WAP技术的手机能浏览由WML描述的Internet内容。

而如今的小屏幕移动设备，比如手机，都已经具备访问WWW的能力。其内置的浏览器，或是第三方浏览器大多是WebKit引擎。
也因此没人再用WML组织WAP站点了，一般都是用HTML+CSS的方式。

在设计小屏幕移动设备网页时，你可能先得了解这么一些前提：

手机屏幕分辨率乱得一塌糊涂，什么分辨率都有！
我们的手机上网费用贼贵贼贵！
UC浏览器拥有了贼大的市场占有率！

关于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标签来换行以达到字符上下间隔；
不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；
不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只能看到“左对齐”。

不过，个人仍然认为，如今建设小屏幕移动设备网页，完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说，我们设计支持UC浏览器的网页，而不是设计以UC浏览器为标准的网页。
这样做还有个好处，可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器，别过于纠结它！
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序，严重建议HTML编码人员留意各个HTML标签的先后顺序。

另外作一些小屏幕移动设备网页设计的相关补充：