CODEWITHSUNDEEP
htmlxhtmlmobile-websiteviewportresponsive-design
whomikey
whomikey

Reputation: 39

css/html responsive and viewport zoom issue

i used html with meta viewport and css3 media queries to make a website responsive for mobile browsers. it works perfect on BlackBerry but on IOS and Android devices it zooms in more. it seems to make things double what it should be? i read that this has to do with the viewport scale but if i make it scale less then it will mess up on BlackBerry and some other devices. i have tried searching this for literally days and tried many things but i can't seem to figure it out. an example of what i want to do is http://www.dribbble.com/ if that helps.

is there a fix for this? you can view the site here http://new.comedytime.tv/ and the meta viewport i'm using is:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

all help is appreciated! tanks! :)

Upvotes: 2

Views: 2750

Answers (2)

Matoeil
Matoeil

Reputation: 7289

try 

  user-scalable = 0

rather than

   user-scalable = no

this should work on every devices resolution. The zoom being deactivate though.

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

Use css media queries to adjust display for every width and height.

Upvotes: 1

Marble Mountain Media
Marble Mountain Media

Reputation: 68

I've not got a direct solution for your problem, but I did a little testing. I checked on my Android (FF Mobile, Android 4.0) and it seems to appear at the correct zoom. Here's a quick screenshot of the top of the home page: https://dl.dropbox.com/u/71993227/2012-08-20_10-10-12.png (you mentioned you tested too, but just wanted to give you that extra feedback).

Your viewport tag seems to be correct from what I can tell, and I tested it on a site of my own, and it worked correctly.

Because the Blackberry and some other devices are so small, you may have to include another media query which targets only small screens, and make some css adjustments for them. Hope this helps a little!

Upvotes: 1

Related Questions