QQ 1640076782

2010年12月20日

手机浏览器的兼容问题

Filed under: 未分类 — 标签:, — fanfan @ 7:13 上午

随着科技的日益进步,浏览网页不仅仅是电脑的专利了。移动终端撑起了另一半天空!

放眼未来,3C发展可谓日新月异。从早期的黑白手机,到塞班、iOS、安卓、黑莓,手机的发展似乎在21世纪突围而出。你在以前有没想过能用手机当作信用卡消费、用手机当作影视娱乐工具等等,现在都能一一实现!可以这么说,未来3C的发展必定是以移动终端为中心的配套移动设备,就是不管你到哪儿,都能随时上网、聊天、娱乐等一体化生活信息应用。

虽然说现在的手机浏览器的技术还没成熟,但是以一个专业的建站公司来说,技术的兼容是不能没有敏锐的触角的。

手机网页编码是遵循XHTML Mobile Profile规范编写的,简称为XHTML MP,也就是通常说的WAP2.0规范。XHTML MP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。

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

经过测试,手机浏览器的兼容问题请看以下列表。

XHTML部分

大多数手机不支持的:

  • 表单元素的“disable”属性

部分手机不支持的:

  • “button”标签
  • “input[type=file]“标签
  • “iframe”标签。

虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

少数手机不支持的:

  • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。

CSS部分

大部分手机不支持的:

  • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
  • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
  • “font-style: italic;”:同上;
  • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
  • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
  • “background-position”属性:但背景图片的其他属性设定是支持的;
  • “position”属性;
  • “overflow”属性;
  • “display”属性;
  • “min-height”和”min-weidth”属性;

部分手机不支持的:

  • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
  • “pading”属性
  • “margin”属性:更高比例的手机不支持”margin”的负值。

少数手机不支持的:

  • 少数手机对CSS完全不支持;

尽量避免兼容问题,请各位使用第三方浏览器软件。比如国内知名的-UC浏览器