I'm looking for tips, tricks and resources on optimizing a website design for Android's browser.
I'm building an Android app and some of the functionality will be accessible through a web interface.
Asked
Active
Viewed 5.8k times
6 Answers
67
I rely on two elements to optimize websites for mobile browsers (especially Android and 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:
<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:
@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);
-
5Most tutorials seem to omit this. Very important information those meta tags! Tells the browser that it's safe to use mobile view. The stock android 2.2 browser does not respect most media queries with width, since it tries to set the page's width to be that of a montior. – Dmitriy Likhten Sep 14 '10 at 05:26
-
With these settings, is there a way to distinguish between a handheld and someone who's browser width is <= 800px? – Josh Johnson May 22 '11 at 11:23
-
2A note on using commas in the meta/viewport tag: MDN says use commas, Apple says semicolons. Seems like both can use semicolons, though. – Dave Lancea Jul 12 '12 at 16:53
-
1Where do you get this info from? Could you post some links to official documentation? – cnst Feb 27 '13 at 19:05
-
In the meantime HandheldFriendly is not used by a significant number of devices any more - just for old Palm devices and AvantGo browser, see http://bowdenweb.com/wp/2011/05/meta-name-handheldfriendly-element.html Unnecessary IMHO. – Volker E. Jul 10 '13 at 14:34
16
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/
Dave Lancea
- 1,439
- 13
- 19
-
I am just copying and pasting these codes between tags, and voila! it is working like a charm on Android native web browser. Thanks – Aryo Mar 11 '12 at 16:00
-
I'm pretty sure that there should be commas instead of semicolons. It's not working with semicolons on the iPhone. – ph3nx Mar 05 '13 at 19:58
-
-
In the meantime `HandheldFriendly` is not used by a significant number of devices any more - just for old Palm devices and AvantGo browser, see http://bowdenweb.com/wp/2011/05/meta-name-handheldfriendly-element.html Unnecessary IMHO. – Volker E. Jul 10 '13 at 14:33
5
Regarding jQuery, there is a version optimized for mobile browsers: http://jquerymobile.com/
Mike Chelen
- 372
- 2
- 9
-
2
-
jQuery Mobile is still under development. An Alpha 3 was released recently: http://jquerymobile.com/2011/02/jquery-mobile-alpha-3-released/ – Mike Chelen Feb 17 '11 at 05:33
-
jQuerymobile is the mobile version of a jQueryui not the jQuery library. – Justin Hamade Jun 05 '15 at 16:07
4
dev.opera has some articles, not for android of course but for mobile web sites in general. For example:
Zitrax
- 16,107
- 15
- 79
- 98
1
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.
Paul D. Waite
- 89,393
- 53
- 186
- 261
