手机-wap页面制作注意事项
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
部分手机浏览器对如下css样式支持不是很好,建议慎重使用
一、关于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,但不支持background-image,也就是说不支持CSS背景图显示,在UC浏览器你只能看到背景色,为了手机的流量,提倡尽量少用背景图。 ·max-device-width这样的选项,限定屏幕宽度小于480的设备才采用该样式表。代码格局如下: <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" /> 二、关于手机页面的标准头: 1、字符编码使用utf-8:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2、指定页面手机内存缓存中的存储时间段:<meta http-equiv="Cache-Control" content="no-cache"/> 3、<meta name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0; maximum-scale=2.0"/> device-width通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 4、解决原先在Pocket PC 2002上能够全萤幕显示的Flash影片(240×320),到了Pocket PC2003之后,自动会缩小的问题:<meta name="MobileOptimized" content="240"/> 三、其他: 1、网页大小限制:建议低版本页面不超过15k,高版本页面不超过60k; 2、部分手机不支持png8和png24,所以尽量使用jpg和gif的图片; 3、另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计; 4、部分手机对于超大图片,既不进行缩放,也不显示横下滚动条; 5、少数手机在打开超过20k的测试页面时,会显示内存不足; 6、大部分手机不支持表单元素的“disable”属性; 7、在手持设备上,按钮最好不要直接用img标签,如<input type="image" src="图片路径" name="Submit" value="" />。 四、浏览器使用情况: 1、手机自带浏览器市场份额高达49.6%;2、在现有手机浏览器品牌中; 3、腾讯手机浏览器份额27.3%; 4、UC手机浏览器份额11.2%; 5、Opera手机浏览器份额1.8%; 6、其他手机浏览器份额2.4%。 该文章在 2014/4/5 23:10:35 编辑过 |
关键字查询
相关文章
正在查询... |