优化Android浏览器网站的提示?

时间:2009-02-14 10:25:59

标签: android html css mobile-website

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

我正在构建一个Android应用程序,并且可以通过Web界面访问某些功能。

6 个答案:

答案 0 :(得分:67)

我依靠两个元素来优化移动浏览器(尤其是Android和iPhone)的网站:

Meta标签: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);

答案 1 :(得分: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/

答案 2 :(得分:5)

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

答案 3 :(得分:4)

dev.opera有一些文章,当然不是针对Android,而是针对移动网站。例如:

Making small devices look great

Designing and Developing mobile web sites in the real world

答案 4 :(得分:1)

因为所有移动网页都尽可能地保持一切的纤薄......

答案 5 :(得分:1)

我不知道任何不错的Android资源,但我不会对JavaScript过于疯狂。如果Android与iPhone类似,那么(当前)JavaScript的性能将比您在台式机上的使用情况要差得多。