Responsive site viewport issue for different devices

Question

I have created a responsive template and I have the following problem.

I created a media query for resolutions smaller than 480px on desktops and smaller than 540px for phones. On the desktop it works fine, on the phones it works as expected.

@media only screen and (max-device-width: 540px),
screen and (max-width: 480px) {

so, whenever I open the site on a tablet, I get the desktop version loaded (as expected) but with a zoomed-in result.

If I use the following code, with maximum scale at 0.6

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

I get tablet view correctly, but then in phones it's zoomed-out.

I have searched everywhere and tried every combination in order to make this work. From what I realize I want maximum-scale=1 for phones and 0.6 for tablets. How can this be achieved?

Thanks in advance for your time. Hope it can be done.

edit: removed url.

score 1 · Answer 1 · answered Jul 18 '13 at 16:52

1

That's because the maximum-scale is set to 0.6. This means the website is showed at 60%. Try leaving that out or set it to 1.0

answered Jul 18 '13 at 16:52

Stinodotbe

402
3
10

if I set to 1 then the tablet view gets zoomed-in :/ – scooterlord Jul 18 '13 at 17:01
...in other words, if I put max-scale=1 I get normal phone view and zoomed in tablet and for max-scale=0.6 I get normal tablet view and zoomed out phone. I am looking for a mix out of these two.. :/ sorry for double post – scooterlord Jul 18 '13 at 17:02
You can try using a script which detects weither you're on a phone or tablet – Stinodotbe Jul 18 '13 at 17:06
:/ anyway pointer to this? I am not that fluent with javascript, etc – scooterlord Jul 18 '13 at 17:23

Responsive site viewport issue for different devices

1 Answers1