How to get accurate scale on ipad

Question

What I'm trying to achieve is to force the scale to 1.0 when the ipad is in landscape mode, and 0.75 when it is in the portrait, but with the user zoom disabled . I tried all combinations of view meta tags and nothing worked:

• when there is no user scalable, the landscape works fine, but it does not scale to 0.75 in the portrait, no matter how I set the maximum and minimum scale.
• when the user scalable yes , it works fine sometimes, but since there is a lot of adding content with ajax, sometimes when the page gets longer, the page just scales to fit the whole page on the screen, and I want to prevent that.

So, is there a way to force the exact number to scale? Or disable zoom when changing page length? (The page width should always be 1024px, it doesn't matter css for different orientation and width = device width, I just need to scale)

Answer 1

Patrick's answer is useful, here is a more verified version

var checkOrientation; checkOrientation = function() { var viewport; viewport = document.querySelector("meta[name=viewport]"); if (window.orientation === 90 || window.orientation === -90) { return viewport.setAttribute("content", "width:device-width, initial-scale=1.0, user-scalable=1"); } else { return viewport.setAttribute("content", "width:device-width, initial-scale=0.6, user-scalable=1"); } }; window.onorientationchange = function() { return checkOrientation(); }; checkOrientation(); 

And don't forget to put this in the head of the document:

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

Note that one of the differences is the comma instead of half-columns in the arguments

Answer 2

It is not possible to achieve this only with the meta viewport parameter.

However, you can determine the orientation using javascript and change the meta viewport setting using javascript, so you can have a script trigger when changing the orientation and setting another viewport.

Maybe something like this (not verified):

 window.onorientationchange = function() { viewport = document.querySelector("meta[name=viewport]"); if (window.orientation == 90 || window.orientation == -90) { viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; user-scalable=1'); } else { viewport.setAttribute('content', 'width=device-width; initial-scale=0.75; user-scalable=0'); } } 

Answer 3

Remember to set max-scale = 1 in javascript and also use the correct width width = device-width:

 var checkOrientation; checkOrientation = function() { var viewport; viewport = document.querySelector("meta[name=viewport]"); if (window.orientation === 90 || window.orientation === -90) { return viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1"); } else { return viewport.setAttribute("content", "width=device-width, initial-scale=0.6, maximum-scale=1, user-scalable=1"); } }; window.onorientationchange = function() { return checkOrientation(); }; checkOrientation(); 

Answer 4

Or use your server-side language to detect iPad presence via USER_AGENT.