手机浏览页面样式注意事项

一关于手机页面的标准头

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

字符编码使用utf-8


<meta http-equiv="Cache-Control" content="no-cache"/>

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


<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 - 允许用户缩放到的最大比例


<meta name="MobileOptimized" content="240"/>

解决原先在Pocket PC 2002上能够全萤幕显示的Flash影片(240×320),到了Pocket

PC2003之后,自动会缩小的问题


二 关于css样式

1页面自带css建议style标签头标准化,格式:<style type="text/css"

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网页大小限制:建议低版本页面不超过15k,高版本页面不超过60k。

2部分手机不支持png8和png24,所以尽量使用jpg和gif的图片;

3另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所

以慎用有平滑渐变的bar设计;

4部分手机对于超大图片,既不进行缩放,也不显示横下滚动条;

5少数手机在打开超过20k的测试页面时,会显示内存不足

6大部分手机不支持表单元素的“disable”属性

7在手持设备上,按钮最好不要直接用img标签
<input type="image" src="图片路径" name="Submit" value="" />

四 浏览器使用情况:

CNNIC与CR-Nielsen联合发布的《2009年中国移动互联网与3G用户调查报告》显示,

手机自带浏览器市场份额高达49.6%,

在现有手机浏览器品牌中,

腾讯手机浏览器份额27.3%,

UC手机浏览器份额11.2%,

Opera手机浏览器份额1.8%,

其他手机浏览器份额2.4%。

尽管今年 UC浏览器扳回一城,重新超越了QQ浏览器,但不排除有随时被对方超越的可

能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值