iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue

iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

In my case, the solution was to change positioning to fixed:

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

I also used a script to detect iPad with iOS 7:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

In my case, the solution was to change positioning to fixed:

@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}

I also used a script to detect iPad with iOS 7:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

Ipad: window.height() give bad value in Safari but not in Chrome

Safari browser on iOS has a bottom bar (unlike chrome) that is being calculated inside the window height while it isn't really part of the window/page.

you need to detect cases (with user-agent) where the client uses Safari browser on iOS device, and then you need to set the height of the body (with javascript) to $(window).height() - bar_height, and it should solve your problem.

hope that helps.

iPad in landscape gives wrong width and height

The width and height of the screen and of the window in the screen don't change as the screen orientation changes, they will always be width = 768 and height = 1024 (until Apple makes an iPad with more pixels, like the height of iPhone's has changed).

In that screen window, you have a view controller with a root view. The size of that view will change with the screen orientation.

iOS Safari browser website issue (no height?)

Gallery has zero-height, height: 100%; doesn't do what you expected. Use 100vh instead.

.h100, #gallery .slideshow, #gallery .slidewrap, .galleryWrap, #galleryView, #galleryView section.read, gallery, #gallery, .slideshow .view-area {
    height: 100vh;
}

---

Related Topics