iPad Retina media queries not being detected in Modal View

[Dreeke]

I am opening an external link with the Modal View. The page being opened is using media queries to cater for the various iOS devices and their respective Retina or non-Retina displays.

In the modal view the media queries for the iPad Retina are not detected. When I open that same page in safari using the button in the modal view it does work.

In other words in Safari the page is showing as it should, in the modal view from within Baker not.

The media queries for the non retina iPad do work.

Any ideas?

[Simbul]

What are the media queries you are using? How do you determine whether they were or were not detected?

[Dreeke]

To debug I have set a html background color for testing purposes which gets shown in mobile safari but not within the modal web view.
The real purpose is a div that I set to display:none which works in mobile safari but not within the modal web view.

An example of a media query as I use it to detect iPad Retina display:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation: landscape )
and (-webkit-device-pixel-ratio: 2.0) {

}

I have tried different variations of the media queries and they didn't make a difference.

[steiny2k]

hm. it seems to me the device orientation isn't properly reported to the website. Try to read the values via JavaScript maybe using this snippet:

    <script type="text/javascript">
        var dpr = 1;
        if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
        alert("current device pixel ratio:" + dpr);
        alert("orientation: " + window.orientation);
        var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        alert("device-width: " + width);
    </script>

And post the results here.

[Xm4s]

I've done a quick check and I noticed that window.orientation is wrong in the modal webview.
Thanks for the segnalation, we'll work on a fix as soon as possible :)

[Dreeke]

Great! Thank you!

[Xm4s]

With the above commit I've fixed the window.orientation property in the uiwebview in the modal view.
I've also checked the page device pixel ratio and width and they both seems correct.

[Dreeke]

Using steiny2k's javascript I noticed that on my normal html pages in Baker the orientation always returns 0. Both in portrait as well in landscape.

To be clear, this is on non modal-window, non external pages. On iPad and iPhone, retina and non-retina.
The width does change depending on orientation.

[Xm4s]

Thank you for the segnalation, I forgot to set the correct window.orientation when page finish loading :P
Fixed with commit e21cb2b

Now, if you want to do some testing I suggest this script:

<script type="text/javascript">
    window.addEventListener('orientationchange', function() {
        alert("orientation: " + window.orientation);
    });

    setTimeout(function() {
        alert("orientation: " + window.orientation);
    }, 10);
</script>

With this you'll see an alert spawning when the page finish load (actually 10ms after the page load) and everytime you rotate your device/simulator.

The 10ms delay is there to give Baker the time to adjust the correct orientation, which normally is always 0 due to a UIWebView bug.