为您的主站点规划和构建支持移动设备的站点

时间:2008-08-13 03:23:56

标签: html mobile responsive-design wap wml

我们正处于为其中一位客户构建移动网站的初始规划阶段。此移动网站将是我们已为其构建的主站点的补充。我们已确定内容将成为主要网站的一小部分内容,并将针对预计会使用该网站的主要受众群体。

在查看一些示例移动网站时,我们注意到网址中有很多WAP的网站实际上只是简化的HTML文件。 http://wap.mlb.com并非真正支持WAP,而是简单的HTML。

我的问题是WAP想到了过去?随着智能手机和iPhone能够呈现网站,我们需要担心WML和WAP,还是一个精简的HTML版本就足够了?

您也可以在下面推荐博客或教程或答案,以便最好地检查移动设备吗?作为程序员,我们是否需要知道用户代理的每个变体,以便将它们重定向到我们的移动网站?

最后,您是否会为iPhone / Touch Safari浏览器编制移动网站,或者只是按原样离开网站?

8 个答案:

答案 0 :(得分:4)

较新的手机配备了使用HTML Mobile Profile(XHTML MP)的WAP2,这与普通的HTML非常相似。较旧的手机使用无线标记语言(WML)。

根据您的受众情况,我会考虑使用XHTML MP制作手机友好版本的网站并完全删除WML。通过手机友好,我的意思是光图形,小JavaScript和简单的导航。

要查看不同手机的功能,请查看WURFL

另外,您可能需要查看来自w3c的Mobile Web Best Practices

答案 1 :(得分:3)

在没有做太多工作的情况下,您可以采取以下两项措施来改善对iPhone的支持:

向上滚动页面以隐藏网址栏:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

并设置页面宽度的缩放(最好进行一些测试并使用它,也可以查找可能使用user-scalable=true的其他示例):

<meta name="viewport" content="width=320; user-scalable=false" />

答案 2 :(得分:1)

我强烈建议您查看Cameron Molls'本书Mobile Web Design。它不是建立移动优化网站的技术方法,而是让您考虑各种可用选项并总结每个方面的优缺点。肯定会让你思考你正在采取什么方法,以及它是否正确。我认为它还有一些指向有助于检测移动设备对您网站的请求的资源,有各种选择。

答案 3 :(得分:1)

截至目前(2014年)

我们可能不需要单独的移动设备网站,​​而是可以使用 Twitter Bootstrap 这样的前端库,它使用响应式呈现 以便网站适应屏幕大小,无论是平板电脑还是移动设备桌面

与拥有单独的移动和桌面网站相比,其中一个主要优势是减少维护

要了解有关 Twitter Bootstrap 的更多信息,请点击here

答案 4 :(得分:0)

我认为与2.5G手机和新款3G手机的主要区别在于,虽然2.5G手机使用自己的浏览器,但3G手机上的浏览器在渲染能力方面变得更加相似/准确。

另一方面,你可以使用CSS以大屏幕格式或小型移动优化的方式呈现相同的HTML,所以我想发生的事情是“简单的HTML”方法似乎是最难走的路。此外,无表格布局允许网站更好地扩展,从而更容易以大屏幕和小屏幕格式呈现网站。

所以最终的问题将是目标市场的问题。您是否瞄准精通技术的观众,他们往往拥有完全支持3G的手机?您是否定位最多可能拥有2.5G的人?

答案 5 :(得分:0)

我的经验是,这取决于你想要做什么以及用户是谁/在哪里。

虽然WAP有很多坏消息,但它的优势在于你拥有低带宽高延迟连接。运营商的网关优化了WML内容,大大减少了无线传输的数据量。如果您拥有iPhone等,在3G覆盖率稳定的地区,您可以购买更丰富的内容,但如果您希望应用程序在更远的地方仍然表现良好,那么WAP具有很大的优势。

使用WAP需要注意的一点是,手机中WAP支持的质量差异很大(猜测你也会说智能手机网络浏览器也一样)。他们中的大多数都显示页面正常,但在某些浏览器中表单处理确实很糟糕。

如果您根据用户代理改变内容,您还应该提供一种明确的方式来访问特定类型的内容(例如,单独的uri) - 自动选择并不总是正确的,您希望客户端能够覆盖它。

如果您使用WAP开发,请查看基于Windows的WAP浏览器WinWAP。

答案 6 :(得分:0)

如果您想花很少的钱,您可以在亚马逊上找到我的书"Palm OS Web Application Developer's Guide"的旧版本,价格低于1美元。虽然有关旧Palm VII设备的具体提示不再适用,但有一些关于制作可能仍适用的移动网站的部分。我的基本建议是:首先使用相关信息缩小页面,然后导航链接;将泛型/样板内容推送到其他页面;尝试优化以减少用户在单个页面上花费的时间;并避免为页面下载大量对象(图像,JavaScript文件)以减少延迟。

答案 7 :(得分:0)

代码: 当我使用它时,使w3验证器返回11个erorrs。 这是尝试的索引页面: 你不会使用多行,而不是使用。它们是模板线。

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>