移动设备专用网站开发。从何开始？

Question

我正在学习为移动Web浏览器开发网站的实现方法。有没有在线讨论移动网站特定开发问题的好资源/社区?

我的初步理解是，为了涵盖不同的手机类型，您需要构建一个支持使用WebKit引擎（iPhone、Android等）的浏览器的站点，以及另一个更基本的站点用于其他旧的浏览器，这个假设正确吗？

还有，什么是针对WebKit开发？它与仅使用JavaScript / CSS / HTML有何不同？它是否相同，只是限制自己使用特定于WebKit的函数和CSS？我在WebKit网站上查看，但它没有用这些术语来解释。

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

- Andy

Answer 1

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

苹果公司有一个非常好的指南，帮助您优化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应用程序（或者安卓应用程序），但是它是通过HTML5构建的。你可以使用Webkit图像中的CSS3创建非常流畅的动画效果，而iPhone还有元标记来隐藏Safari导航工具栏。然后用户可以将你的页面添加到主屏幕上，它就像一个普通的iPhone应用程序一样工作。当然，你受限于浏览器及其性能。但是你可以创建多平台应用程序 :) HTML5 + JS是唯一获得Steve Jobs批准的多移动平台语言，而且借助PhoneGap，你甚至可以将它放入AppStore！ 如果Web应用程序听起来很有趣，你应该查看jQTouch，jQuery CSS过渡插件和当然是Jonathan Stark的使用HTML、CSS和JavaScript构建iPhone应用程序。

- gregers

Answer 2

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

Webkit 是 Safari（移动版 Safari）、Chrome 和 Andriod 浏览器（移动版 Chrome？）使用的引擎，你可以使用标准的 Javascript、XHTML 和 CSS，最重要的是让你的网站“适合大拇指操作”，因为这些设备都是由触摸屏驱动的。

我所说的“适合大拇指操作”是指你有大型链接/按钮，易于用手指点击，大多数移动浏览器都很擅长近似你想要点击的链接，但如果你把很多东西挤在一起，它经常会猜错。

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

我最好的例子来自 Ars Technica - 在桌面浏览器中查看他们的网站，然后在移动浏览器中查看他们的网站。这是一个非常流畅的网站版本。（http://www.arstechnica.com/）

- Nate

Answer 3

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

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

查看此问题以获取有关如何构建移动友好站点的更多详细信息。

- Karan

Answer 4

如果您的网站非常简单（只提供内容），我建议使用像Mobify这样的服务：http://mobify.me/ 很多大型出版物都在使用它，我也用过。事实上，Ars Technica（Nate Bross在早期回复中提到的）使用此服务来显示其移动内容。

您可以控制样式，但仅限于此，因此如果您的网站更复杂，则可能不适合您。否则，这是一个很好的服务。您可以几乎与您的移动站点地址的DNS更新时间一样快地启动移动站点。

- eMike

Answer 5

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

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

HTML5的最新发展之美在于，您可以使用新的Iphone/Android功能，如地理位置，而旧版浏览器将简单地忽略JS代码，如果您仔细将其放置在try catch语句中。

对于“肥手指”类型的问题，如果您确实需要，可以提供不同的CSS，使按钮变大。无论如何，好的浏览器都应该使默认按钮易于按下。

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

- hendry