Zoom in and fit website in phones

Question

I am facing some challenge in solving this. I have created a theme which is responsive. So it fits any device with any resolution. My client wants it to be non-responsive. Which means the way it shows in desktop, it should show the same way everywhere.

Everything is fine except when i open the site on phone, it shows scrollbar (which it should because its fixed width) but i want it to zoom-out and fit the screen. I have seen a lot of answers which says to use viewport in the below way:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

But that didn't work. If i zoom out manually from my iphone, it works perfect.

I have set the width of the container as 1230px. I cannot set this to 100%. Is there any way to achieve this ?

Demo site: http://fixar.co.uk/

If your client wants it to only be optimized for desktops, then just remove the media query. Or if that doesn't work, just set initial=scale=2 or something. — TylerH, Mar 03 '14 at 19:46
Can you be a bit more specific in your request? Do you want the site to be zoomed in to maximum zoom on load when viewed from a mobile device? — TylerH, Mar 03 '14 at 19:51
I am sorry if i was not clear. When the site loads on phone, right now it has scrollbars. I want to zoom-in till the scroll bar vanishes. Basically till it fits the screen. — Abhishek Saha, Mar 03 '14 at 19:55
If you have scroll bars already, then I think you want to **zoom out** until the scroll bars are no longer there. Make sure you are using `overflow: auto;` and not `overflow: scroll;` anywhere in your code. It will be difficult to isolate the problem, however, without more code in your original post for us to inspect. — TylerH, Mar 03 '14 at 19:58
Additionally you can set `initial-scale=0.5` to have the page load 50% more zoomed out. — TylerH, Mar 03 '14 at 20:00
Exactly. I tried that. Even that didnt work. Looks like its not recognizing the value of initial-scale — Abhishek Saha, Mar 03 '14 at 20:28

score 1 · Answer 1 · answered Mar 03 '14 at 20:19

1

You can set the width to match that of your site's theme:

<meta id="viewport" name="viewport" content="width=960, initial-scale=1, maximum-scale=1">

answered Mar 03 '14 at 20:19

isherwood

58,414
16
114
157

score 0 · Accepted Answer · edited May 23 '17 at 12:28

I got the answer from the link How do you change zoom level dynamically with Javascript?

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

Zoom in and fit website in phones

2 Answers2