1 Topic by dmholman (edited by dmholman 2014-07-15 04:42:37)

  • Registered: 2014-07-15
  • Posts: 4

Topic: Doesn't Switch into Small Screen Mode on Nexus 7

I've been trying out the Juicebox Wordpress plugin and thought I was having an issue related to Wordpress or the theme I'm using.  The gallery looks great on desktop and when I access it on my smartphone, the gallery switches into small screen mode.  However, when I access the gallery with my Nexus 7, the gallery stays in large screen mode and reduces the shown image to almost the size of a thumbnail instead of going into small screen mode.

I just accessed the Juicebox site and checked the demos with my Nexus.  The Juicebox-Pro "Simple" demo does exactly the same thing.  Showing a 3x3 grid of thumbnails and a small main image about twice the width of the thumbnail matrix and not quite the height.  When I access the same demo with my phone, it goes into small screen mode.

If I go to http://www.whatismybrowser.com on the Nexus, it shows a computer screen resolution of 601x906 pixels and a browser size of 601x793 pixels.

Any idea why this doesn't go into small screen mode with that resolution?  Thank you.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Doesn't Switch into Small Screen Mode on Nexus 7

According to the Nexus 7 Tech Specs on this Google page, the Nexus 7 has a screen resolution of 1280 x 800 and, as noted on the Juicebox Screen Modes Support Section:

Large Screen Mode (LSM) is displayed on screens of 1024x768 pixels or bigger.

I do not know why your device's screen resolution is being returned as 601x906 but the information above seems to explain why Large Screen Mode is being used on the Nexus 7.

  • Registered: 2014-07-15
  • Posts: 4

Re: Doesn't Switch into Small Screen Mode on Nexus 7

I see.  After running some tests on my desktop, can I assume you're not looking at the actual browser size, but the overall screen size?  I assume that because using the Web Developer plugin to set my desktop browser to 480x640, your demos still render in large screen mode.  Is there a way to change that to look at the actual browser size?  And is it possible to change the resolution that the Juicebox switched from LSM to SSM?

I could see how it would be possible in javascript to force it on the gallery page, but I don't think I have that option with the Wordpress Plugin.

Thank you.

  • Registered: 2014-07-15
  • Posts: 4

Re: Doesn't Switch into Small Screen Mode on Nexus 7

Steven - Okay, did some quick checking and here's why the Nexus 7 returns 601 x 906 in portrait mode:

http://scaledrop.net/mediaqueries-for-a … d-devices/

http://cssmediaqueries.com/what-are-css … eries.html

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Doesn't Switch into Small Screen Mode on Nexus 7

Is there a way to change that to look at the actual browser size?

No. The logic which is used to determine which Screen Mode to use when screenMode="AUTO" is within the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be changed.

And is it possible to change the resolution that the Juicebox switched from LSM to SSM?

No. This is not a user-changeable option.

If you really want to force Small Screen Mode on the Nexus 7, then you would need to detect the device being used with JavaScript and if it is the Nexus 7, then you would set screenMode="SMALL" in the gallery's embedding code (otherwise, you would set screenMode="AUTO" for Juicebox to use its own detection routine).
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var sm = 'AUTO';
    if (navigator.userAgent.match(/Nexus 7/i)) {
        sm = 'SMALL';
    }
    new juicebox({
        containerId: 'juicebox-container',
        screenMode: sm
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If you wanted to incorporate this into WP-Juicebox, then you would need to open the 'wp-juicebox.php' file in a plain text editor and insert the following line between lines 286 and 287 (code above condensed for ease of insertion into WP-Juicebox):

$string_builder .= '        screenMode: navigator.userAgent.match(/Nexus 7/i) ? "SMALL" : "AUTO",' . PHP_EOL;

Please note that screenMode is a Juicebox-Pro option which is not available in Juicebox-Lite (the free version).

  • Registered: 2014-07-15
  • Posts: 4

Re: Doesn't Switch into Small Screen Mode on Nexus 7

I see what you're saying.  I don't think it's a good strategy to individually target a specific device.  There's quite a few methods that will return the screen and viewport values consistent enough with @media to set breakpoints that should work on every computer and device not using an ancient browser.

In my case, since I'll already be using jquery for other parts, I could leverage  $(window).width() and $(window).height() to tell when to switch.

This is your product and I'm pretty certain you're more knowledgeable in this area than I am, but it seems like the way you guys are determining when to switch to small screen mode is an older way of thinking that is not consistent with all the new devices currently out and that will be coming out. 

Thanks for the info Steven ... I'm going to take a look at some other fully responsive solutions first and compare them to Juicebox before I decide which way to go.  Thanks again.

  • Daf
  • Member
  • Offline
  • Registered: 2014-10-28
  • Posts: 14

Re: Doesn't Switch into Small Screen Mode on Nexus 7

Steven wrote:

According to the Nexus 7 Tech Specs on this Google page, the Nexus 7 has a screen resolution of 1280 x 800 and, as noted on the Juicebox Screen Modes Support Section:

Large Screen Mode (LSM) is displayed on screens of 1024x768 pixels or bigger.

May well be the Nexus 7 v2 launched 2013 - screen res  1200 x 1920 pixels (323 ppi)

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Doesn't Switch into Small Screen Mode on Nexus 7

I notice that the user agent string for the Nexus 7 contains the term "Safari" rather than "Mobile Safari".
This might have a bearing on Juicebox's decision as to which Screen Mode to use.

Regardless, when screenMode="AUTO", Juicebox seems to use Large Screen Mode by default for both the Nexus 7 v1 and Nexus 7 v2 and this cannot be changed easily.
It is not possible to change Juicebox's internal logic which determines which Screen Mode is to be used.
The code which handles the detection of devices is buried within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.

You could certainly override Juicebox's own detection routine and create your own JavaScript function to determine which Screen Mode to use (setting screenMode to either 'LARGE' or 'SMALL' accordingly). However, there are many factors to consider (e.g. user agent strings, screen dimensions, pixel density) and this might turn out to be quite a complex task. Allowing Juicebox to decide (by setting screenMode="AUTO") is usually the best (and certainly the easiest) thing to do.

If you don't like how Juicebox handles a certain device, then making an exception for it (as I noted above) might be the next best thing. Juicebox would still use its own detection routine for all other devices.

Please note that this is only possible with Juicebox-Pro. The screenMode configuration option is a Pro option which is not supported by Juicebox-Lite (which always uses the default value of 'AUTO').