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

原文： http://hi.baidu.com/onionsmm/item/977b8142e64b9b12886d10ea 一、关于手机页面的标准头
字符编码使用utf-8

指定页面手机内存缓存中的存储时间段

Html代码  


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  

 

device-width通知浏览器使用设备的宽度作为可视区的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例

解决原先在Pocket PC 2002上能够全萤幕显示的Flash影片（240×320），到了Pocket
PC2003之后，自动会缩小的问题

二、关于css样式
1页面自带css建议style标签头标准化，格式：
id="internalStyle">
2 部分手机浏览器对如下css样式支持不是很好，建议慎重使用：
· 不支持font-family属性，也就是说，在很多浏览器可能只有一种默认字体；
· 不支持font-szie属性，如在UC浏览器你只能看到一样大小的字体；
· 不支持width、height、padding、margin、line-height属性，如，在UC浏览器只
能通过p、br 等HTML标签来换行以达到字符上下间隔；
· 不支持固定像素的宽度，100%显示页面，如：在UC浏览器始终将看到的是“满屏的
”；
· 不支持浮动、层叠布局，float和position属性无效，如：在UC浏览器你只能看到
“左对齐”，建议使用table格局。
· 支持background-color，但不支持
bc7a
background-image，也就是说不支持CSS背景图
显示，在UC浏览器你只 能看到背景色，为了手机的流量，提倡尽量少用背景图。
· max-device-width这样的选项，限定屏幕宽度小于480的设备才采用该样式表，代
码格局如下：
三、其他
1网页大小限制：建议低版本页面不超过15k，高版本页面不超过60k。
2部分手机不支持png8和png24，所以尽量使用jpg和gif的图片;
3另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所
以慎用有平滑渐变的bar设计;
4部分手机对于超大图片，既不进行缩放，也不显示横下滚动条;
5少数手机在打开超过20k的测试页面时，会显示内存不足
6大部分手机不支持表单元素的“disable”属性
7在手持设备上，按钮最好不要直接用img标签

四、浏览器使用情况：
CNNIC与CR-Nielsen联合发布的《2009年中国移动互联网与3G用户调查报告》显示，
手机自带浏览器市场份额高达49.6%，
在现有手机浏览器品牌中，
腾讯手机浏览器份额27.3%，
UC手机浏览器份额11.2%，
Opera手机浏览器份额1.8%，
其他手机浏览器份额2.4%。
尽管今年 UC浏览器扳回一城，重新超越了QQ浏览器，但不排除有随时被对方超越的可
能。