44

我正在寻找有关针对 Android 浏览器优化网站设计的提示、技巧和资源。

我正在构建一个 Android 应用程序，其中一些功能可以通过 Web 界面访问。

4

6 回答 6

67

我依靠两个元素来优化移动浏览器（尤其是 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);
于 2010-08-07T12:46:34.360 回答
16

我发现将这两个元标记添加到我的网站有很长的路要走：

<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/

于 2010-06-10T20:54:50.843 回答
5

关于jQuery，有一个针对移动浏览器优化的版本：http: //jquerymobile.com/

于 2010-09-01T21:12:08.173 回答
4

dev.opera 有一些文章，当然不是针对 android 的，而是针对一般移动网站的。例如：

让小型设备看起来很棒

在现实世界中设计和开发移动网站

于 2009-02-14T11:13:14.413 回答
1

因为所有的移动网页都尽可能地精简每件事。

于 2009-02-14T10:57:18.633 回答
1

我不知道任何像样的 Android 资源，但我不会对 JavaScript 过于疯狂。如果 Android 与 iPhone 类似，那么（当前的）JavaScript 性能将比您在台式机上习惯的要差得多。

于 2010-06-10T21:02:22.153 回答