哈哈，
因此，我一直致力于为我们的房地产门户网站开发一个智能手机网站，我做的第一件事就是看看其他人必须在网上分享的经验教训，但我发现的很少。
我不是在构建应用程序，而是在构建网站，我正在寻找关于 html、css、宽度/高度方法、javascript（jquery 会在所有平台？）以及与此类平台相关的任何其他内容。
环顾四周，我非常喜欢http://mobile.whistlerblackcomb.com/。
问候， 丹尼斯
【问题讨论】：
标签： javascript html css mobile smartphone
更新：
虽然下面的大部分文字仍然适用，但我现在要说的是，jQuery Mobile 在提供一组精心设计和可用的 UI 组件方面做得很好，同时还减轻了许多设备测试和检测问题我过去使用过 WURFL。它仍处于测试阶段，但似乎运行良好。我建议检查一下。
开始时要考虑的两个最重要的问题是：
1) 设备检测
2) 移动端界面设计
对于第 1 个问题，我强烈建议查看 WURFL 设备数据集：
使用它，您可以使用其用户代理字符串检索正在访问您的站点的设备的（某些）功能。测试移动网络应用程序有点像地狱中的浏览器测试——设备和浏览器的不同组合如此之多，这是一项艰巨的任务。如果您可以专注于为功能相当强大的手机开发一两个版本，请说：
1) 最小 300 像素宽度，声称支持“网络”和触摸屏 2) 同上，但没有触摸屏
您可以创建一个非常有用的网站，该网站适用于大多数“智能手机”或“应用手机”，David Pogue 已更准确地命名它们。对于实际测试，您可以尝试：
1) 列出您所有的朋友以及他们拥有的手机类型 2) 前往手机商店并使用这些手机测试您的网站
而且，无论您做什么，当您不可避免地收到用户关于设备上损坏/缓慢的内容的反馈时，您都必须保持敏捷。
关于 UI 设计，有几个问题。最简单的是好看的 CSS。在这里，只要看看你喜欢的一些移动网站并窃取他们的 CSS。完成此操作后，您基本上就是在一个小屏幕上进行常规的旧式 Web 开发。 ul's 将成为漂亮的 iPhone-y 表格等。
更大的问题是移动网络的可用性。在很多方面，我们都处于 90 年代的移动 Web 开发环境中。我的意思是我们在没有完善的设计模式的情况下工作。这使得移动 Web 开发变得非常有趣，但这也意味着你必须准备好随着更好的想法的发展而调整你丑陋/破碎的 UI。当前的一个示例是您在许多移动网站上看到的全球导航/面包屑。数量惊人的人试图通过在移动应用程序中提供持久导航工具（后退按钮）来模仿原生 iPhone 应用程序的行为。虽然这有点漂亮，但它有一些问题：
1) 这是多余的，因为浏览器带有一个用户非常熟悉的后退按钮。这些全局导航存在于本机应用程序中的原因是它们没有提供免费的导航工具。
2) 网络很棒。您可以在其结构中的任何位置输入、离开和重新输入“应用程序”。通过假设用户通过您的应用采用线性路径，您正在降低其网络性，使其相对于网络的其余部分更加粗糙。
3) 它坏了。您可能会遇到应用导航和浏览器导航指向相反方向的情况（点击应用中的后退按钮会在应用历史记录中前进），或者您使用 javascript 伪造后退按钮，如果它们不这样做会中断不要从应用程序的开头开始（电子邮件链接、书签），或者您设置会话，这可能是一个很大的痛苦，只是为了免费复制您从浏览器中获得的内容。会话也容易受到破坏（电子邮件链接、书签），而且您实际上并没有获得太多收益。
我想我的主要观点是：
1) 不要忘记您在网络上。网络很酷，浏览器也很酷，好好利用吧。
2) 不要害怕玩耍。这里没有很多成熟的模式，因此您可能需要尝试一些自己的模式。
【讨论】：
A List Apart 可以帮助您入门： "Put Your Content in My Pocket" CRAIG HOCKENBERRY
【讨论】：
对于现代智能手机，开发传统网页和开发专用网站实际上没有区别。
但您可以尝试苹果、RIM、摩托罗拉和诺基亚等主要厂商提供的模拟器，看看它们的外观。
【讨论】：
我建议您看看其他一些移动网站。我在下面发布了一些。
【讨论】：
由于现代移动浏览器的工作方式与桌面浏览器非常相似，“缩小 JS 和 CSS，优化图像”这句古老的格言应该是您最关心的问题，因为带宽在移动设备上更有价值。
此外，请考虑以下事项：
您可能还会发现这很有帮助：Why your mobile site probably sucks
【讨论】：
移动网站通常在普通手机上使用，并且通常会访问 m.example.com 而不是 www.example.com。这些网站很少/没有 javascript 或 css 兼容性。当您询问移动网站时，请记住有两种类型的移动网站。
现代智能手机应该像处理成熟的浏览器一样处理浏览器，但事实并非如此。事实上，iPhone 生活在一个幻想世界中，它会报告窗口宽度超过 900 像素！
您可以为智能手机做一些小技巧。触摸屏对 :hover 伪类没有用处。对于需要悬停的菜单来说，这可能是个问题。你可以围绕这个进行设计。如何？你问...
Apple 关注一个新的元标记（在其上进行谷歌搜索），其他智能手机浏览器也关注这一点。有了这个，您可以强制智能手机以像素为单位报告实际屏幕尺寸，而不是预先编程的幻想尺寸。
既然你已经这样做了，你可以使用css条件语句，
@media only all and (max-width:600px){
CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}
我用它来阻止<div>s 使移动设备屏幕变得混乱：例如灯箱。我还使用它来修改图像宽度，因此它们更适合设备。为什么我选择 600 像素？我觉得许多较新的“上网本”也应该归为一类。
我希望这会有所帮助。
--戴夫
【讨论】：
如果您希望专门为 iPhone 或 iTouch 进行开发，请使用此条件语句。
[if SafMob] @import url(iphone.css);
这是一篇关于为移动设备构建网站的文章。 http://www.alistapart.com/articles/pocket/
【讨论】：
Meagan Fisher 在Designing Effective Mobile Interfaces 上的演讲提供了很好的概述。她推荐 Cameron Moll 的《移动网页设计》一书。技术方面，如果您还没有熟悉 XHTML Mobile Profile，我会先熟悉一下。
就设计而言，想得细。找一本排版不错的书，看看你是否可以用 CSS 复制页面布局。 “应用于 Web 的印刷风格元素”是一个很好的起点。电话网站是关于滚动的，而不是复杂的导航。节奏和间距很重要。保持图片小，文本对比度高，你最终会得到加载速度快且看起来不错的东西。
【讨论】：
还有这三部曲，Cameron Moll 的“移动网页设计”：
State of the Mobile Web
Methods to the Madness
Tips & Techniques
该系列来自 2005 年，但许多信息仍然具有相关性。最后一部分“Tips & Techniques”还列出了很多关于移动 Web 开发的其他资源。
【讨论】：