【问题标题】:How to get maximum compatibility with most of the devices for a Mobile Website?如何最大程度地兼容移动网站的大多数设备?
【发布时间】:2011-08-14 08:43:32
【问题描述】:

我为智能手机制作了单独的网站,现在需要为其他旧手机制作单独的网站。 如何在旧/小屏幕手机上最大限度地兼容移动网站的大多数设备?

我正在考虑使用

HTML 文档类型

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

AND 仅支持 CSS Mobile Profile 2.0 的选择器和属性

  • 图像不应该使用太多,不 应该使用透明图片
  • 旧版本不支持 Javascript 手机
  • 某些 CSS 2.1 选择器不是 兼容旧浏览器
  • 布局应该没有固定宽度 因为各种屏幕尺寸 那里
  • 最好不要使用外部 CSS。 里面的 CSS 就好了
  • 不支持 HTML 5 文档类型,所以我将使用 XHTML Basic 1.1
  • 不应该是 width 和 float 为任何元素定义
  • http 请求应该非常少
  • 不应定义font-family

有些事情我不确定?

  • 如果可能,我应该使用 CSS 精灵吗?
  • 我应该在 而是
  • 内联 CSS 是否优于外部 CSS CSS?
  • 我应该使用任何 css 重置代码吗? css 的分层?
  • 我应该使用 utf-8 还是 ISO?
  • 是否可以使用表单 验证?
  • 我应该不提供任何链接吗? 打开一个新窗口?
  • 在 字体大小的 px 位置?

我的积分够好吗?

虽然我要详细阅读http://www.w3.org/TR/mobile-bp/ 并且我还检查了http://html5boilerplate.com/mobile/,但它适用于所有人,包括智能手机+,但有些东西很有用

智能手机前端矩阵 https://spreadsheets.google.com/spreadsheet/ccc?authkey=CJPSkfwO&pli=1&hl=en&key=tLen0XZBVTziVZBzwwQFxlw&hl=en&authkey=CJPSkfwO#gid=0

手机屏幕分辨率,按品牌和型号排序 http://cartoonized.net/cellphone-screen-resolution.php

但是根据您的个人经验,您还建议考虑哪些其他事项,有什么建议吗?

【问题讨论】:

    标签: css xhtml mobile mobile-website mobile-phones


    【解决方案1】:

    为什么你使用&lt;?xml version="1.0" encoding="UTF-8"?&gt; ??这是一个 xml 标头,而不是 html。

    关于问题:

    • 图片不宜过多,不宜使用透明图片

    您可以使用透明 GIF,它们在某种程度上是受支持的。然而,透明的 PNG 不是。

    • 旧手机不支持 Javascript

    不是不支持。首先,在旧浏览器上,JS 总是默认禁用的。第二个问题是 JS 的错误实现。第三个因素是旧手机资源有限,由于 JS 是客户端,它可能会导致手机崩溃/减速。

    • 布局应该没有固定宽度,因为有各种屏幕尺寸

    在移动设备上,提示总是采用流畅的布局(基于百分比)

    • 最好不要使用外部 CSS。里面的 CSS 就好了

    内联 css 在旧设备上是最好的,因为它们中的大多数都存在请求过多或将样式应用于 dom 的问题。请记住,他们使用 EDGE 甚至更糟糕的 WAP 连接,几乎和拨号一样糟糕。

    • 不支持 HTML 5 文档类型,所以我将使用 XHTML Basic 1.1

    您可以使用基本的甚至更好的 XHTML,&lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"&gt;

    • 不应为任何元素定义宽度和浮动

    宽度,始终为 %。漂浮,从不。直到 S60 3rd FP1,花车在 Symbians 上都是错误的。 (N73 在 S60 3rd 上运行,float 有问题。在 N95' S60 3rd FP1 上,float 在大多数用途上都是固定的,但仍然会出现一次或多次错误,具体取决于使用情况)。这同样适用于绝对位置和固定位置。

    • http 请求应该非常少

    尽可能减少。更多的请求,更多次糟糕的 wap/edge 需要去获取一些东西,以及更多的加载时间。

    • 不应定义字体系列

    家庭和大小是旧设备令人讨厌的两件事。他们中的大多数都有自己的字体和大小。 例如:摩托罗拉 V3R/RAZR V3 有自己的字体,只有一个大小(如果我没记错的话,每个字母大约是 7~9px 的屏幕)。但是你可以声明 Arial,因为它是一种常见的字体,当浏览器有它时就会使用它。

    • 如果可能,我应该使用 CSS 精灵吗?

    不惜一切代价避免。在减少请求数量的同时,您遇到了其他问题:您的布局将是流畅的,并且在使用百分比时背景位置通常会混乱。而且老黑莓喜欢用背景图像来出错。

    • 内联 CSS 是否优于外部 CSS?

    在我看来,是的。由于连接和渲染都很慢,如果你的 css 文件由于某种原因超时,(已经很糟糕的)布局会更糟。

    • 我应该在 css 的分层中使用任何 css 重置代码吗?

    我曾经使用 YUI 的浏览器,但在非常旧的浏览器(同样是 V3r 和附近)上并没有太大的区别。但是当你向客户展示时很好:P

    • 我应该使用 utf-8 还是 ISO?

    真的取决于您的内容如何。如果您对所有 html 实体进行编码(例如使用拉丁字符时),请选择 UTF-8。如果您不编码,请尝试 ISO。但无论如何,旧浏览器强制它自己的编码。例如,检查 N95 的浏览器,您可以设置自己的编码,从而弄乱 html 的编码。

    • 是否可以使用表单验证?

    尽可能避免使用 JS,始终使用服务器端。

    • 我不应该提供任何打开新窗口的链接吗?

    旧版浏览器不支持“标签”,因此即使您指定为 target="_blank",它也会在您当前页面的顶部打开。 我不记得什么时候,但 S60 的浏览器确实支持标签,但这是一个隐藏的功能。例如,N95 S60 3rd FP1 webkit 浏览器不允许您在新窗口中打开链接,但如果使用 _blank 则会打开一个新标签。要在“标签”中循环,您需要按“5”键。

    • 字体大小用em代替px有必要吗?

    当您有一个增加字体大小的脚本(那些 A-/A+ 图标)时,出于易于理解的原因,这很好。但正如我在 No font-family should be defined 问题上所说的那样。


    一些提示:

    = 大多数旧的黑莓浏览器都是垃圾,比 IE5-6 差得多。所以,例如如果你想在你的主容器上有 5px 的左/右边距以便它可以显示为“居中”,请从 margin:0 5px; 放弃然后选择border-left:5px solid #same_bg_color;border-right:5px solid #same_bg_color;很遗憾,但这就是 RIM 所做的:/

    = 始终尝试使您的布局尽可能垂直。不要在同一行中堆叠太多东西。

    = 始终在文本中间制作导航锚点。旧设备导航从锚点跳转到锚点(或 S60+ 中的“伪鼠标”),因此如果您到达页面末尾,您必须按“向上”键无数次。通过创建“转到顶部”来避免它,或者更好的是,在页脚上创建相同的顶部菜单。

    = 大部分时间不要乱用字体。颜色,大小,家庭在大多数情况下都不起作用。

    = 所有这些提示都考虑了以下我个人设备排名的“低”设备和一些早期“中”设备:

    高端设备:运行以下操作系统的设备:iOS、Android、WP7+、Bada、bbOS 6.0+

    中端设备:高端设备之前的设备。一些后来的 Symbian S40 系列和所有 S60,最新的 Sony/Ericsson 的 Walkman,才开始使用 Android。

    低端设备:所有其他设备,包括 WML、WAP1、BlackBerries、Windows Mobile(6.XX 或更早版本)、大多数 Symbian S40 和更早版本,以及其他所有设备。

    【讨论】:

    • @JitendraVyas np。任何其他问题,请随时提出。顺便说一句,我只是提醒你.. 我在你的 LinkedIn 移动组中;P
    【解决方案2】:

    如果您必须确保您的网站可以在所有设备上运行,您可能想看看 WALL http://wurfl.sourceforge.net/java/wall.php

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-10-08
      • 1970-01-01
      • 1970-01-01
      • 2011-04-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多