针对 Android 浏览器优化网站的技巧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/548892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tips for optimizing a website for Android's browser?
提问by nyenyec
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 界面访问。
回答by Daniel
I rely on two elements to optimize websites for mobile browsers (especially Android and iPhone):
我依靠两个元素为移动浏览器（尤其是 Android 和 iPhone）优化网站：
Meta tags: HandheldFriendly and viewport
元标签：HandheldFriendly 和视口
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 浏览器默认设置为。为了使页面宽度与设备宽度相同，我设置了以下元标记：
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
CSS media queries
CSS 媒体查询
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-includes 包含到主要的主要 css 文件中：
@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);
回答by Dave Lancea
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/
回答by Mike Chelen
Regarding jQuery, there is a version optimized for mobile browsers: http://jquerymobile.com/
关于 jQuery，有一个针对移动浏览器优化的版本：http: //jquerymobile.com/
回答by Zitrax
dev.opera has some articles, not for android of course but for mobile web sites in general. For example:
dev.opera 有一些文章，当然不是针对 android，而是针对一般的移动网站。例如：
Making small devices look great
回答by Paul D. Waite
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 性能将比您在台式机上所习惯的要差得多。
回答by Peter
As all mobile web pages keep every thing slimmed as mutch as you can..
由于所有移动网页都尽可能地精简所有内容。
