Can't Detect HTC Incredible/2 size when portrait [Device Orientation calculations]

The "screen size" is picked with the following function:
In ais/assets/js/ais.js

Math.max( $(window).width(), $(window).height() );

So the size is picked based on the width and height of the screen, and not just the width. This is so both landscape and portrait images can be accommodated.

But of course, this means the 768x341 image should always be chosen on that device (assuming the display area of the web browser is always 800x480 and 480x800).

Is the 900x400 size one of your styles or is it the original image?

If it's a style, than the javascript is running, but picking odd sizes. It could be explained if $(window).height() on the phone was returning 900 or larger. Any chance you could throw something like "alert($(window).height());" into a test page and let me know what your phone says?

Either way unfortunately, I think it probably wouldn't matter as you still won't get the behaviour you're looking for. It looks like you need the limiting the size selection to be by browser width only. If you interested in this, I can change this issue into a feature request, and I'll add an option to select how the browser size is chosen (probably either by height, width, max of both, or min of both).

If 900x400 is your original image, then that javascript isn't setting the adaptive cookie for some reason. Is there any way you can get the javascript error messages from your phone (or see if there are any)?

If that's the case, then you could change the default image to be a mobile size. But you should know that when a user gets to your site for the first time, the javascript may not have a chance to set the adaptive cookie before the first requests for images get sent. In these cases, that first page load will see your 'default' sized images.

If you're using mobile sized images as the default, it's very likely that the first time a desktop user hits your site, they'll get the mobile images and not the full sized ones.

However, that's not to say you can't or shouldn't have the default be mobile images. To change the default image size, just edit the 'adaptive' style (at: admin/config/media/image-styles/edit/adaptive). From there, you can add a resize directives to make a small mobile size the default.

Thanks,

I'll turn this issue into a feature request once we solve your other problem. Looking at your dev site, I've found another bug in the javascript for style selection, it shouldn't be causing your issue however.

I threw together something to tell you the width and height. Let me know what this page says on you phones: http://csiuo.com/dimentions.php

My Nexus S with a 800 x 480 screen reports 800x1130 in portrait and 800x358 in landscape... so clearly, the phones are liars. I'll see what can be done about it.

Thanks,

I'll do some research in how outerWidth is supported in the browsers and if its correctly supported, I'll make that the default method of find the width.

That 0-480 wasn't returning anything was issue is the one I mentioned I noticed on your site. I'm working on fixing the javascript so that if the javascript runs it will pick at least one of the styles, but I've noticed you've since fixed the problem on your site and I haven't been able to reproduce that particular issue.

Do you know how you fixed it and what your old setting were?

Thanks,

Never mind, figured it how to reproduce it. If the browser height and width are smaller than the smallest threshold, no style is selected. A work around would be to set the threshold on a style down to 1.

A little project management:

• This issue will track the failure of $(window).width() and $(window).heigth() to return honestly in certain situations and the progress of switching to outerwidth or another solution.
• The feature request for allowing how the screen size is chosen to be configurable will be tracked on http://drupal.org/node/1483668
• The bug that no style is selected if the window is smaller then your smallest threshold will be tracked on http://drupal.org/node/1483678

For the size issue on the phone. Looks like there isn't a way to get the mobile browsers to stop lying without a viewport metatag.

Essentially, you need to tell the phone not to scale with a line like this in the head of the document:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

For testing, please see this page: http://csiuo.com/dimensions.php

Without the meta tag, the phone will make up a width and height to best display the content. Both the iphone and android browsers do this, but the android browser takes it a step further and lies about the screen resolution (the iphone is honest about the resolution and will happily report that the browser window is much bigger then the screen resolution).

Unfortunately, there doesn't seem to be a consistent way of getting an accurate width of the mobile devices in javascript alone. So to mitigate this problem, I'll add the feature to select how the screen size is detected and I'll put caveats about the viewport meta tag on the module page and in the readme.

If you can think of a good way to do this, please let me know.

As you mentioned, window.outerWidth does contain the correct values. Unfortunatelym the value from $(window).outerWidth() is different then the value in window.outerWidth. I'm still looking at whether window.outerWidth works consistently enough in all the browsers to be safe to switch to, and why the jQuery version returns a different answer.

Did some research, window.outerWidth has only been supported by IE since IE 9. What version of IE are you using?

That looks like bad news for being able to use window.outerWidth, but it does explain why jQuery's $(window).outerWidth() returns a different values.

Applied fix to the dev branch and enabled snapshots so you can test this once Drupal.org regenerates the dev release (~12 hours from now).

I decided to use multiple method of figuring out the screen size, since:

• window.outerWidth/outerHeight answers honestly on Android devices, dishonestly on iOS, and not at all in IE
• window.screen.availWidth/availHeight answers honestly on iOS devices, dishonestly on Android, and not at all in pre-html5 browsers
• $(window).width()/height() will always answer and is the fall back

So I get the width and height with:

    var width = [ window.outerWidth, window.screen.availWidth, $(window).width()];
    var height = [ window.outerHeight, window.screen.availHeight, $(window).height()];
    
    width = width.filter(Number);
    height = height.filter(Number);

    var width = Math.min.apply( Math, width);
    var height = Math.min.apply( Math, height);

If you can download the dev release off the main AIS module page (once it's regenerated) and test it out, please let me know.

I've also fixed and added http://drupal.org/node/1483678 and http://drupal.org/node/1483668 in the latest dev as well.

Thanks,

Released in versions 1.1

Preface: While the title of this issue isn't indicative of the discussion that took place about width, height, and general device orientation, I felt it was better to post here than to create a new, mostly related issue. If that was incorrect, please let me know and I will generate a new ticket.

AIS 7.x-1.6+4-dev uses the following code (ais/assets/js/ais.js:50-58):

var width = [ window.outerWidth, window.screen.availWidth, $(window).width()];
var height = [ window.outerHeight, window.screen.availHeight, $(window).height()];

width = width.filter(Number);
height = height.filter(Number);

var width = Math.min.apply( Math, width);
var height = Math.min.apply( Math, height);

window.screen.availWidth always returns the width of an iPad in its "upright" position (at least on a non-retina iPad < iOS7). As such, even if the device is in landscape orientation, it will report the width as 768px wide (visit http://ryanve.com/lab/dimensions/ to quickly verify this). AIS then chooses the MINIMUM value of its three width detection methods, and will thus always choose an incorrect value for non-retina iPad widths in landscape orientation. This means that an AIS served image that should be ≤ 1024px is actually being served as ≤ 768px; an image that is less than half the intended width and is also being scaled beyond acceptability.

Proposed solution [Looking for input]

var orientationCorrectedWindowScreenAvailWidth = (Math.abs(window.orientation) === 90) ? window.screen.availHeight : window.screen.availWidth;
var orientationCorrectedWindowScreenAvailHeight = (Math.abs(window.orientation) === 90) ? window.screen.availWidth : window.screen.availHeight ;

var width = [ window.outerWidth, orientationCorrectedWindowScreenAvailWidth, $(window).width()];
var height = [ window.outerHeight, orientationCorrectedWindowScreenAvailHeight, $(window).height()];

width = width.filter(Number);
height = height.filter(Number);

var width = Math.min.apply( Math, width);
var height = Math.min.apply( Math, height);