首页 文章

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

提问于
浏览 次
6

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

在浏览一些示例移动网站时，我们注意到很多网站中包含WAP的网站实际上只是简化的HTML文件 . http://wap.mlb.com实际上不支持WAP，而是简单的HTML .

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

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

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

html mobile responsive-design wap wml

8 回答

  • 0

    截至目前（2014年）

    我们可能不需要单独的移动设备站点，而是我们可以使用像_415233这样的前端库，它使用响应式渲染，以便站点适应屏幕大小，无论是平板电脑还是移动设备或桌面

    与拥有单独的移动和桌面网站相比，其中一个主要优点是需要 less maintenance .

    要了解有关Twitter Bootstrap的更多信息，请单击here

    回复于
  • 0

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

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

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

    另外，您可能需要查看w3c中的Mobile Web Best Practices .

    回复于
  • 0

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

    向上滚动页面以隐藏URL栏：

    <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" />
    回复于
  • 3

    我的经验是，它实际上取决于你想要做什么以及用户是谁/在哪里 .

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

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

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

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

    回复于
  • 1

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

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

    所以最终的问题将是目标市场 . 您是否瞄准精通技术的 Spectator ，他们往往拥有完全支持3G的手机？您是否针对最多可能拥有2.5G的人？

    回复于
  • 4

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

    回复于
  • 0

    我强烈建议你看看Cameron Molls' book Mobile Web Design . 它不是一个技术性的操作方法用于构建移动优化网站，但让您考虑各种可用选项并总结每个方面的优缺点 . 肯定会让你思考你正在采取什么方法，以及它是否正确 . 我认为它还有一些指向资源的指针，这有助于检测到您网站的移动设备请求，有各种选项 .

    回复于
  • 1

    代码：当我使用它时，使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”>
    回复于

相关问题