为Android浏览器优化网站的技巧?

I'm looking for tips, tricks and resources on optimizing a website design for Android's browser.

我正在寻找为Android浏览器优化网站设计的技巧、技巧和资源。

I'm building an Android app and some of the functionality will be accessible through a web interface.

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

6 个解决方案

#1

I rely on two elements to optimize websites for mobile browsers (especially Android and iPhone):

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

Meta tags: HandheldFriendly and viewport

Usually I want pages not to have a page width of 800 to 900 pixels, as the Android and iPhone browsers set it to by default. To have the page width the same as the device width, I set the following meta tags:

通常我不希望页面宽度为800到900像素，因为Android和iPhone浏览器默认设置为800到900像素。为了使页面宽度与设备宽度相同，我设置了以下元标签:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

CSS media queries

I adapt the design to the page width. For instance, having a 2 column content for large screens and 1 column for small screens and print. So I include into the main main css-file further css-includes with media queries:

我使设计适应了页面的宽度。例如，大屏幕有2列内容，小屏幕和打印有1列内容。因此我将css文件的主文件进一步纳入css-include与媒体查询:

@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);

#2

I found it went a long way to add these two meta tags to my site:

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

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />

Here's more info on them: http://learnthemobileweb.com/2009/07/mobile-meta-tags/

这里有更多关于他们的信息:http://learnthemobileweb.com/2009/07/mobile-meta-tags/

#3

Regarding jQuery, there is a version optimized for mobile browsers: http://jquerymobile.com/

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

#4

dev.opera has some articles, not for android of course but for mobile web sites in general. For example:

opera有一些文章，当然不是针对android，而是针对移动网站。例如:

Making small devices look great

让小设备看起来很棒

Designing and Developing mobile web sites in the real world

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

#5

As all mobile web pages keep every thing slimmed as mutch as you can..

就像所有的移动网页一样，让所有的东西都尽可能的精简。

#6

I don’t know of any decent Android resources, but I wouldn’t go too crazy on the JavaScript. If Android is anything like the iPhone, (current) JavaScript performance will be much worse than you might be used to on desktops.

我不知道有什么像样的Android资源，但我不会太沉迷于JavaScript。如果Android与iPhone类似，(当前的)JavaScript性能将比您在桌面上使用的要差得多。