viewport on iPad strange behaviour - ipad

Question

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???

Answer 1

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">