landscape orientation not recognizing proper viewport width

[aubynfs]

I'm using Riloadr in a new website build. Great system, love the ease-of-use, options, and flexibility.

However, I've noticed that I can't get the right images to load on an iphone5, when in landscape orientation.

breakpoints: [
    {name: 'small', maxWidth: 400},
    {name: 'medium', minWidth: 401, maxWidth: 640},
    {name: 'large', minWidth: 641}
],

The small images are loading on the iphone in portrait orientation, as they should with a viewport width of 320.

The small images are also loading when the phone's in landscape orientation, even though the screen width is now 568 css pixels — I thought the medium images would load in this case.

I can post a sample if need be, but could this be related to the fact that when I go to the test.html page (http://tubalmartin.me/riloadr/test.html), and load the page in landscape mode on the iphone5, it reports that
new getViewportWidthInCssPixels() = 320.

Maybe Riloadr doesn't measure landscape orientation screen widths, just portrait ones? Maybe this was intentional?

I'm just trying to figure out if my setup is wrong, or if this behavior is from the riloadr.js file.

Also, I'm using:
<meta name="viewport" content="width=device-width, initial-scale=1">
in my html
and riloadr.jquery.min.js

thanks

[tubalmartin]

I'll have a look into this ASAP.

[aubynfs]

My js/jquery skills aren't strong enough to suggest any code changes, but I've been doing a bit of research (and ignore me if this is all useless!).

In case it helps:

1. Apparently screen.width doesn't return a different value when a device's orientation changes. If that's the base of your math, it might be the problem

2. This link (http://www.menacingcloud.com/?c=orientationScreenWidth) suggests that you should do a "manual" check to see what the orientation of a device is (compare screen width to screen height), and store the screen width value based on the results of your check.

[tubalmartin]

That's what I suspected, I'll make some tests and report back. Thanks again.

[tubalmartin]

Hi there again! I've made some tests.

Could you run the test.html page again and report whether the getViewportWidthInCssPixels3() returns the expected result in your Apple devices?

[aubynfs]

When I refresh the test.html page on my iphone5 in landscape orientation, getViewportWidthinCssPixels3() does NOT return the right value. It sill shows "320", the device's width in portrait orientation.

These lines DO show the right width, though:

window.innerWidth = 568
document.documentElement.clientWidth = 568
document.documentElement.offsetWidth = 568

Note that these values don't update when I change the orientation of the iphone. I must refresh the page as well for the values to update correctly.

On 2014-07-22, at 11:50 AM, Túbal Martín wrote:

Hi there again! I've made some tests.

Could you run the test.html page again and report whether the getViewportWidthInCssPixels3() returns the expected result in your Apple devices?

—
Reply to this email directly or view it on GitHub.