Site not scaling in iPad Portrait and mobile landscape

0
votes

I been trying to get the site to scale to fit on Portrait in iPad but to no avail .. this is my meta :

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

also added this to script:

<script type="text/javascript">
    if(navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
</script>

and on my CSS in Queries I tried this:

@media only screen and ( min-width: 768px) and ( max-width: 1024px ) {
    body {min-width: 980px;}
}

basing on what I saw here:

iPad not scaling site down website correctly in portrait orientation

I tried height too, but to no avail...

There was also an a similar question here:

Safari on iPad Does Not Fit 980px Width Site in Portrait Mode

But to be honest i didn't understand if there is even an answer(I'm not taking viewport off..)...

As I mentioned, looking good but in portrait I have to slide to the left to see the whole thing. and lastly in mobile it fits perfectly in 320 but when landscape it still stays at 320 so I assume it might be the same case in scaling....I assume I didn't have to use %....but is that the case?

2
csshtmlipadresponsive-designviewport

2 Answers

1
votes

Is it this iOS <5.1 scaling bug that's the issue - http://adactio.com/journal/5088/ ?

This is fixed in iOS6 but if you'd need it for an older device you could try -

http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

or https://github.com/scottjehl/iOS-Orientationchange-Fix

1
votes

Maybe due to the old "orientation problem".

you may want to try this codes:

if (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';
    jQuery(document).ready(function() {
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    });
}
}