Question

我开始学习开发移动网络浏览器网站的细节。是否有在线讨论移动特定网站开发问题的优秀资源/社区？

我最初的理解是，为了覆盖不同的手机，您需要构建一个为webkit引擎（iphone，android等）的浏览器启用的网站，以及其他更老的浏览器的基本网站，这个假设是正确的吗？

开发webkit的确切含义是什么？它与仅使用javascript / css / html有什么不同？它是否相同除了你限制自己的webkit特定功能和CSS？我查看了webkit网站，但没有用这些术语解释它。

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

Answer 1

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

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

我所说的“胖手指友好”是因为你有大量的链接/按钮很容易被你的手指击中，大多数移动浏览器擅长近似你打算触摸的链接，但如果你有很多把东西塞进去的时候，经常会出错。

另一个问题是屏幕尺寸，以及网站的宽度/高度。

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

Answer 2

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

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

请查看此question，了解有关如何构建适合移动设备的网站的详细信息。

Answer 3

如果您想支持旧浏览器，那么您应该拥有多个网站。但首先要看一下移动浏览器统计数据，以确定它是否值得。如果您只想让现有网站适用于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所述，您应优化触控设备。不幸的是，很难知道设备是否有触摸，因为它没有媒体查询。您可以为某些设备执行用户代理嗅探，但我不建议这样做。这里有更多讨论：Optimize website for touch devices

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

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

您特别要求提供移动网络浏览器的网站，但您也可以查看创建移动网络应用的可能性。它看起来像一个iPhone应用程序（或Android），但它是在HTML5的帮助下构建的。你可以使用webkit图像中的CSS3做漂亮的动画，iPhone也有meta标签来隐藏Safari导航工具栏。然后，用户可以将您的页面添加到主屏幕，它就像普通的iPhone应用程序一样。当然，你只限于浏览器和它的性能。但是你可以创建多平台应用程序:) HTML5 + JS是史蒂夫乔布斯认可的唯一多移动平台语言，在PhoneGap的帮助下你甚至可以将它带入AppStore！如果网络应用听起来很有趣，你应该查看Jonathan Stark的jQTouch，jQuery CSS Transition plugin，当然还有Building iPhone apps with HTML, CSS and JavaScript。

Answer 4

如果您的网站非常简单（仅限内容投放），我建议使用mobify等服务：http://mobify.me/

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

你可以控制风格，这就是它，所以如果你的网站更复杂，它可能不适合你。否则，这是一项很好的服务。您的移动网站上传速度几乎与移动网站地址更新的DNS速度一样快。

Answer 5

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

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

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

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

保持简单，你不必看到这些支离破碎的＆amp;昂贵的设备依赖方法。手写HTML5并使用validator。祝你好运！

移动特定网站开发。从哪儿开始？

5 个答案: