哈都，
所以我一直致力于为我们的房地产门户网站开发一个智能手机网站，我做的第一件事就是看看其他人必须在网上讲述的经验教训，但我发现的很少。
我不是在构建应用程序，而是在构建网站，我正在寻找关于 html、css、宽度/高度方法、javascript 的注意事项（jquery 会在所有平台上运行良好吗？）以及与此类平台相关的任何其他内容。
环顾四周，我非常喜欢http://mobile.whistlerblackcomb.com/。
问候，丹尼斯
问问题
13797 次
9 回答
15
更新：
虽然下面的大部分文字仍然适用，但我现在要说jQuery Mobile在提供一组精心设计和可用的 UI 组件方面做得很好，同时也减轻了我使用过的许多设备测试和检测问题WURFL 用于过去。它仍处于测试阶段，但似乎运行良好。我建议检查一下。
开始时要考虑的两个最重要的问题是：
1) 设备检测
2) 移动端UI设计
对于问题 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）不要害怕玩耍。这里没有很多成熟的模式，因此您可能需要尝试一些自己的模式。
于 2009-12-21T04:19:47.660 回答
1
A List Apart 可以帮助您入门： CRAIG HOCKENBERRY 的“将您的内容放入我的口袋”
于 2009-12-04T19:08:39.103 回答
0
使用现代智能手机，开发传统网页和专用网站实际上没有区别。
但是你可以试试苹果、RIM、摩托罗拉和诺基亚等主要厂商提供的模拟器，看看它们的外观。
于 2009-12-04T18:48:15.813 回答
0
我建议看看其他一些移动网站。我在下面发了一些。
- m.reddit.com
- digriver.com
- mobile.washingtonpost.com
于 2009-12-04T20:12:25.937 回答
0
由于现代移动浏览器的工作方式与桌面浏览器非常相似，“缩小 JS 和 CSS，优化图像”这句古老的格言应该是您最关心的问题，因为带宽在移动设备上更有价值。
此外，请考虑以下事项：
- 想想您是否需要所有图像，以及它们是否对于小屏幕来说太大了。考虑删除或减小大图像的大小。
- 检查您的 JavaScript - 如果没有它，您的网站还能运行吗？禁用部分功能可能会有所帮助，因为它可能很容易降低移动浏览器的速度
- 您通常可以通过在主站点中包含为小屏幕设备量身定制的专门 CSS 样式来解决问题
您可能还会发现这很有帮助：为什么您的移动网站可能很烂
于 2009-12-04T20:24:42.980 回答
0
移动网站通常在普通手机上使用，并且经常访问 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 像素？我觉得许多较新的“上网本”也应该归为一类。
我希望这有帮助。
——戴夫
于 2009-12-09T01:18:27.483 回答
0
如果您正在寻找专门为 iPhone 或 iTouch 进行开发，请使用此条件语句。
[if SafMob] @import url(iphone.css);
这是一篇关于为移动设备构建网站的文章。 http://www.alistapart.com/articles/pocket/
于 2009-12-10T20:58:16.447 回答
0
Meagan Fisher 关于设计有效的移动界面的演讲提供了很好的概述。她推荐 Cameron Moll 的《移动网页设计》一书。技术方面，如果您还没有熟悉 XHTML Mobile Profile，我会先熟悉一下。
就设计而言，想得更薄。找一本排版很好的书，看看你是否可以用 CSS 复制页面布局。“应用于 Web 的印刷风格元素”是一个很好的起点。电话网站是关于滚动的，而不是复杂的导航。节奏和间距很重要。保持图像小，文本高对比度，你最终会得到加载速度快且看起来不错的东西。
于 2009-12-14T15:45:01.410 回答