CODEWITHSUNDEEP
ipadviewportmeta-tags
Swissdude
Swissdude

Reputation: 3556

viewport on iPad strange behaviour

I'm pulling my hair out about this… I know it has been discussed in many threads, but I couldn't find a solution that works for me.

Different problems in iPad and iPhone

When I use this:

<meta name="viewport" content="width=device-width, maximum-scale=3.0,user-scalable=yes"/>

The page displays fine in landscape-mode (on iPhone and iPad)
The page is too wide in portrait-mode and can't be scaled down with pinching

Now (and this is kinda hilarious):

<meta name="viewport" content="width=device-height, maximum-scale=3.0,user-scalable=yes"/>

The difference is width=device-height (vs. device-width)

The page displays fine on the iPad in landscape- and portrait-mode
The page is too wide on portrait mode on the iPhone, works fine in landscape

When I use initial-scale=1.0 everything's messed up totally (I read that initial-scale shouldn't be used anyway?)

Does anybody have an explanation for this???

Upvotes: 0

Views: 373

Answers (1)

apsolut
apsolut

Reputation: 41

if You use this: this will fix when you load into Landscape and go to Portrait. fixed width kills it i think, specialy if you have fixed PX min-width included.

    // BUG orientation portrait/lanscape IOS //
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.addEventListener('orientationchange', function () {
        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
    }, false);
  }
}

also you can fix it with CSS , like this: 

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
 html {zoom:0.75;}
}

it will zoom to 0.75 in portrait mode only..

Can you first test this: 

<meta name="viewport" content="height=device-height,width=device-width">

Upvotes: 1

Related Questions