10

我正在开始学习为移动 Web 浏览器开发网站的来龙去脉。是否有在线讨论移动特定站点开发问题的良好资源/社区？

我最初的理解是，要覆盖不同的手机，您需要构建一个支持带有 webkit 引擎（iphone、android 等）的浏览器的站点和另一个用于其他旧浏览器的更基本的站点，这个假设是否正确？

另外，为 webkit 开发究竟意味着什么？它与仅使用 javascript/css/html 有何不同？除了您将自己限制在 webkit 特定功能和 css 之外，是否相同？我查看了 webkit 网站，但没有用这些术语解释它。

在为移动浏览器开发时，我还需要注意哪些其他问题？

4

5 回答 5

1

我不同意您需要构建网站的多个版本。

一个简单的 HTML5 网站也适用于所有移动浏览器和桌面浏览器。

HTML5 最新发展的美妙之处在于您可以使用新的 Iphone/Android 功能，例如 Geolocation，如果您小心地将 JS 代码放在 try catch 语句中，旧浏览器将简单地忽略它。

对于“胖手指”类型的问题，您可以提供不同的 CSS，如果您真的需要，它会使按钮更大。好的浏览器应该让默认按钮在任何情况下都易于按下。

保持简单，您就不必看到这些分散且昂贵的设备依赖方法。手工编写 HTML5 并使用验证器。祝你好运！

于 2010-06-17T15:16:35.220 回答
1

如果您的网站非常简单（只是内容交付），我建议使用 mobify 之类的服务：http: //mobify.me/

许多大型出版物都使用它，我也有。事实上，Ars Technica（Nate Bross 在之前的回复中指出）使用这项服务来显示他们的移动内容。

您可以控制样式，仅此而已，因此如果您的网站更复杂，它可能不适合您。否则，这是一项很好的服务。您可以让移动站点的启动速度几乎与 DNS 更新移动站点地址所需的速度一样快。

于 2010-06-17T14:32:32.713 回答
1

Webkit 是一个渲染引擎，旨在允许 Web 浏览器渲染网页。它提供了一组类来在窗口中显示 Web 内容并实现浏览器提供的不同功能（如链接、前进/后退等）。

您不需要为不同的渲染引擎（例如 webkit）构建不同的站点。移动网站的设计应考虑屏幕大小以及不同组件在不同渲染引擎中的外观/行为。

查看这个问题，了解有关如何构建移动友好型网站的更多详细信息。

于 2010-05-20T16:34:31.960 回答
1

如果您想支持较旧的浏览器，那么您应该拥有多个站点。但请先查看移动浏览器统计数据，以确定是否值得。如果您只是想让您现有的网站在 iPhone/Android 或其他带有 A 级浏览器的手机上运行，​​那么您可以使用适合移动设备的 CSS（适用于小屏幕）进行自定义。但是要在连接速度慢/不可靠的移动设备上获得良好的性能，您可能需要一个单独的精简 html。

Apple 有一个很好的指南来帮助您优化您的 iPhone 网站。其中大部分也适用于现代移动浏览器：http: //developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Peter Paul Koch 对不同的移动浏览器进行了出色的研究。他有几篇文章，但这是一个好的开始： http ://www.quirksmode.org/mobile/browsers.html

就像 Nate Bross 提到的，您应该针对触控设备进行优化。不幸的是，很难知道设备是否有触摸，因为没有媒体查询。您可以对某些设备进行用户代理嗅探，但我不建议这样做。在此处进行更多讨论：针对触摸设备优化网站

目前，我检测到触摸事件（Chrome 除外）。如果返回 true，我会注入一个触摸 CSS。有点讨厌，但其他选项更糟糕：

function() {
    if( /Chrome/i.test(navigator.userAgent) ) {
        return false;
    }
    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

您特别要求提供用于移动 Web 浏览器的网站，但您也可以查看创建移动 Web 应用程序的可能性。它看起来像一个 iPhone 应用程序（或 Android 应用程序），但它是在 HTML5 的帮助下构建的。您可以在 webkit 图像中使用 CSS3 制作漂亮的动画，iPhone 也有元标记来隐藏 Safari 导航工具栏。然后，用户可以将您的页面添加到他们的主屏幕上，它就像普通的 iPhone 应用程序一样工作。当然，您仅限于浏览器及其性能。但是您可以创建多平台应用程序 :) HTML5 + JS 是史蒂夫乔布斯唯一认可的多移动平台语言，在 PhoneGap 的帮助下，您甚至可以将它放入 AppStore！如果 web-app 听起来很有趣，你应该看看jQTouch，jQuery CSS 转换插件，当然还有Jonathan Stark 的使用 HTML、CSS 和 JavaScript 构建 iPhone 应用程序。

于 2010-06-15T20:07:49.463 回答
1

您的假设是正确的，您需要针对不同的浏览器类型开发多个版本的网站。

Webkit 是 Safari（移动 Safari）、Chrome 和 Andriod 浏览器（移动 Chrome？）使用的引擎，您可以使用标准的 Javascript、XHTML 和 CSS，主要是让您的网站“对胖手指友好”，因为这些设备都是由触摸屏驱动的。

我所说的“胖手指友好”的意思是你有很容易用手指点击的大链接/按钮，大多数移动浏览器都擅长估计你想要触摸的链接，但是如果你有很多东西卡住了在一起，它经常猜测错误。

另一个考虑因素是屏幕尺寸，因此是您网站的宽度/高度。

我对此的最佳说明来自 Ars Technica——在您的桌面浏览器中查看他们的网站，然后在您的移动浏览器中查看他们的网站。它是一个非常漂亮的网站版本。( http://www.arstechnica.com/ )

于 2010-05-20T16:08:06.300 回答