Question

I need my website to adjust itself according to the device. I used the following viewport meta tag:

<meta name="viewport" content="user-scalable=no,width=device-width, height=device-height, minimum-scale=0.1, maximum-scale=0.65" />

It works alright on iPhone. but on android it looks it doesn’t responded to it at all even when I change the scale values. Is there a different tag for android?

Answer 1

You should use the same tag for Android, but there are a few differences how different platforms calculate initial scale from viewport size, or viewport size if not set. Also keep in mind that initial-scale only works first time you load the page, if you reload the page it will keep the scaling that you currently have.

I’m unsure what result you are looking for, but you have a great reference for Android here ( http://developer.android.com/guide/webapps/targeting.html ) and for Iphone here ( http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html ).

Also, you can google for “tale of two viewports” (i was unable to post link because of low reputation)