【发布时间】：2010-10-07 15:02:37
【问题描述】：
我正在寻找有关针对 Android 浏览器优化网站设计的提示、技巧和资源。
我正在构建一个 Android 应用，其中一些功能可以通过网络界面访问。
【问题讨论】：
-
你应该接受一些答案
标签： android html css mobile-website
【发布时间】：2010-10-07 15:02:37
【问题描述】：
我依靠两个元素来优化移动浏览器（尤其是 Android 和 iPhone）的网站：
元标记：HandheldFriendly 和 viewport
通常我希望页面不具有 800 到 900 像素的页面宽度，因为 Android 和 iPhone 浏览器默认设置为。为了使页面宽度与设备宽度相同，我设置了以下元标记：
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
CSS 媒体查询
我使设计适应页面宽度。例如，大屏幕有 2 列内容，小屏幕和打印有 1 列。所以我在主要的主 css 文件中包含了进一步的 css-includes 和媒体查询：
@import url(style-screen.css) screen;
@import url(style-small.css) print, handheld;
@import url(style-large.css) screen and (min-width: 801px);
@import url(style-small.css) screen and (max-width: 800px);
【讨论】：
-
大多数教程似乎都忽略了这一点。那些元标签非常重要的信息！告诉浏览器使用移动视图是安全的。普通的 android 2.2 浏览器不尊重大多数带有宽度的媒体查询，因为它试图将页面的宽度设置为一个显示器的宽度。
-
通过这些设置，有没有办法区分手持设备和浏览器宽度为
-
关于在 meta/viewport 标签中使用逗号的说明：MDN 说使用逗号，Apple 说使用分号。不过，似乎两者都可以使用分号。
-
您从哪里获得这些信息？你能发布一些官方文档的链接吗？
-
与此同时，HandheldFriendly 不再被大量设备使用 - 仅适用于旧的 Palm 设备和 AvantGo 浏览器，请参阅 bowdenweb.com/wp/2011/05/…Unnecessary 恕我直言。
我发现将这两个元标记添加到我的网站有很长的路要走：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />
这里有更多关于它们的信息：http://learnthemobileweb.com/2009/07/mobile-meta-tags/
【讨论】：
-
我只是在 标签之间复制和粘贴这些代码，瞧！它在 Android 本机网络浏览器上运行起来就像一个魅力。谢谢
-
我很确定应该用逗号代替分号。它不适用于 iPhone 上的分号。
-
为
initial-scale=1.0+1 -
与此同时，
HandheldFriendly不再被大量设备使用 - 仅适用于旧的 Palm 设备和 AvantGo 浏览器，请参阅 bowdenweb.com/wp/2011/05/… 不必要的恕我直言。
关于jQuery，有一个针对移动浏览器优化的版本：http://jquerymobile.com/
【讨论】：
-
酷不知道那个。
-
jQuery Mobile 仍在开发中。最近发布了一个 Alpha 3：jquerymobile.com/2011/02/jquery-mobile-alpha-3-released
-
jQuerymobile 是 jQueryui 的移动版本，而不是 jQuery 库。
dev.opera 有一些文章，当然不是针对 android 的，而是针对一般移动网站的。例如：
【讨论】：
因为所有的移动网页都尽可能地精简每件事..
【讨论】：
我不知道有什么像样的 Android 资源，但我不会对 JavaScript 过于疯狂。如果 Android 与 iPhone 类似，那么（当前的）JavaScript 性能将比您在台式机上习惯的要差得多。
【讨论】：