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

StackOverflow https://stackoverflow.com/questions/9435

题

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

在查看一些示例移动网站时，我们注意到许多网址中包含 WAP 的网站实际上只是简化的 HTML 文件。 http://wap.mlb.com 并不是真正启用 WAP，而是简单的 HTML。

我的问题是WAP是不是想起了过去？由于智能手机和 iPhone 能够按原样呈现网站，我们是否需要担心 WML 和 WAP，还是精简的 html 版本就足够了？

您还可以推荐一个博客或教程或回答以下如何最好地检查移动设备吗？作为程序员，我们是否需要了解用户代理的每种变体才能将它们重定向到我们的移动网站？

最后，您会为 iPhone/Touch Safari 浏览器编写一个移动网站，还是让该网站保持原样？

有帮助吗？

解决方案

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

根据您的受众，我会考虑使用 XHTML MP 制作一个适合手机使用的网站版本，并完全放弃 WML。我所说的手机友好是指简单的图形、少量的 JavaScript 和简单的导航。

要检查不同手机的功能，请查看 世界大学联合会.

另外，您可能想看看 移动网络最佳实践 来自 w3c。

其他提示

您可以执行以下两项操作来改善对 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" />

我强烈建议您查看 卡梅伦·莫尔斯 书 移动网页设计. 。它并不是构建移动优化网站的技术指南，而是让您思考各种可用的选项并总结每个选项的优缺点。肯定会让你思考你正在采取什么方法以及它是否正确。我认为它还有一些指向资源的指针，可以帮助检测移动设备对您网站的请求，有各种选项。

截至目前（2014年）

我们可能不需要针对移动设备的单独站点，而是可以使用前端库，例如 推特引导程序 它使用 响应式渲染以便网站能够适应屏幕尺寸，无论是 药片 或者 移动设备 或者 桌面

主要优点之一是它需要 减少维护 与拥有单独的移动和桌面网站相比。

想了解更多 推特引导程序 点击 这里

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

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

所以最终的问题将是目标市场的问题。您的目标受众是精通技术且倾向于拥有完全支持 3G 功能的手机的受众吗？您的目标人群是否最多可能拥有 2.5G？

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

虽然 WAP 受到很多负面报道，但它的优势在于低带宽高延迟连接。WML 内容经过运营商网关的优化，大大减少了无线传输的数据量。如果您拥有 iPhone 等设备，在 3G 覆盖稳定的地区，您可以负担得起更丰富的内容，但如果您希望应用程序在更偏僻的地区仍然表现良好，那么 WAP 具有很大的优势。

使用 WAP 时需要注意的一件事是，手机中 WAP 支持的质量差异很大（我猜您也会对智能手机网络浏览器说同样的情况）。大多数浏览器都可以正常显示页面，但在某些浏览器中，表单处理确实很糟糕。

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

如果您进行 WAP 开发，请查看 WinWAP - 一个基于 Windows 的 WAP 浏览器。

如果你想花很少的钱，你可以找到我的书的二手本 《Palm OS Web 应用程序开发人员指南》 亚马逊上售价不到 1 美元。虽然有关旧 Palm VII 设备的具体提示不再适用，但有一些关于制作移动网站的部分可能仍然适用。我的基本建议是：首先将页面缩小为相关信息，然后是导航链接；将通用/样板内容推送到其他页面；尝试优化以减少用户在单个页面上花费的时间；避免为页面下载大量对象（图像、JavaScript 文件）以减少延迟。

代码：当我使用 w3 验证器时，导致它返回 11 个错误。这是尝试过的索引页面：你不会有的多行，没用过。它们是模板线。

<!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”>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top