【转】手机网页设计注意事项和解决方法-1

手机网页设计注意事项和解决方法-1

1. 基本手机网页设计

1.1 wap端的网站表头

wap端的网站，写的时候首先注意表头，因为是手机端的，所以和我们平常用的web端页面的不一样，表头为：

1.2 尽量少使用水平滚动。

水平滚动除了比较费时之外，用户还将难以判断他们在整个页面中的位置。如果可能，设计的内容不要宽于或长于目标设备的显示屏。尽量保证一行出现14个字符，或者用<br/>换行，或者设宽为100%，以便内容会根据用户手机屏幕的大小自适应往下排。

1.3 避免过多使用文本强调属性，如粗体，斜体和下划线等，因为这降低了小显示屏上内容的可读性。

1.4 尽量少用float。

 因为现行的手机的屏幕限制，没有太多的空间去漂移,故提倡用静态布局和尽量少的用float(ucweb6.0目前还不支持float)

1.5 为了手机的流量，提倡尽量少用背景图

另外，有背景色的白字在部分手机上也是不支持的，故少用此效果

1.6 删除代码内不必要的空白区和代码内的注释 

确保代码内没多余的空白区非常重要。虽然空白区在屏幕上是不可见的。但然要被处理，因为浏览器要对空白区进行分析、排版、css分配和显示等。XHTML代码内注释数量尽量减少，以使代码尽可能地紧凑。

1.7 使用内部样式表。

一般而言，虽然使用外部样式表无论如何都有可能把样式从标记语言中分离出来，这是一种好的方法，但应注意权衡考虑。如果样式定义包含在XHTML代码中，则XHTML页面的显示就更快。

但是外部样式表的使用提供一种在整个服务中更改样式的便利方法。在整个服务器中应该使用相同的外部样式表已避免把多个样式表下载到电话上。外部样式表仅需下载一次并能够保存在高速缓存器中。

所以我们尽量写在xhtml里面，把一些相同的通用的建一个外部样式表。这样便于更快的打开手机页面。

1.8 谨慎使用表格。

因为手机上尽量不让用float布局，那我们为了方便布局，大部分都使用table来布局。

如 果要用嵌套表格，当明确指定子表格的宽度时。开发人员应避免用子表格宽度的一定比例来指定其父表格的宽度。因为设备具有不同的屏幕尺寸，所以百分比不一定 能够表示相同数量的像素。所以我们在表格中要使用绝对宽度，注意必须确保表格的总宽度与所有列的宽度加上边框和单元格间隔的总和是一样的。

1.9 尽可能减少图像数量和减小图像容量大小。

页面上的没一幅图像就产生一次独立的来回。这反过来使整个页面的现实速度减慢。因此建议在全部服务中各个页面使用相同的图像，那么一个特定的图像只需下载一次且能够保存到高速缓存器中。

1.10 定义图片的高度和宽度属性。

在标记语言中明确地指定图像的高度和宽度，以使浏览器为图像预留适当的空间。这不影响XHTML页面的完整下载和处理时间，但却大打改善用户的感受，因为在下载图像之前用户可浏览页面。

      例：<img src="images/001.gif" width="175" height="41"/>

1.11 网页文档使用扩展名命名为 " .xhtml"

推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。

1.12 使用WCSS还是CSS？

WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，这些特殊的属性扩 展 并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。

1.13 网页大小限制

建议低版本页面不超过15k，高版本页面不超过60k。

1.14 网页之间的空隙。

网页之间的空隙我们一般用空格表示，因为手机中不会说文字之间有太大的距离，所以一般用空格" "表示，或者margin和padding值也可以用，但最好不要超过10px。

1.15 避免空值属性

 如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。