• Registered: 2012-04-30
  • Posts: 24

Topic: iOS Chrome window size

Noticed on the newly release iOS Chrome version that Juicebox is acting like the mobile window is much larger (perhaps due to pixel density when JS reports window size?)

Thought I'd bring it up.

Thanks!

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

Re: iOS Chrome window size

What device and version of iOS are you using, and could you perhaps upload a screenshot somewhere? Thank you.
I have tried Chrome on my iPod Touch 4 iOS 5.1.1 and a standard gallery (such as this one) is truncated at the bottom due to the address bar at the top but it does not sound like the pixel density issue you are experiencing.

3 Reply by sswany (edited by sswany 2012-07-02 23:44:44)

  • Registered: 2012-04-30
  • Posts: 24

Re: iOS Chrome window size

Ya, no problem.  I'm using an iPhone 4S, iOS 5.1.1.  The truncation thing I'm seeing too, but it looks like the screenshots here:

http://cl.ly/0O1w1X2n0r2n2x1N2446

If I open the 'full.html' in the jbcore folder, it obviously doesn't work like that, but the error message you can tell is not sized correctly either.

http://cl.ly/1T272r1A020Q0V183a0h

The demo on the juicebox site though seems to work ok, so I'll keep looking, but not sure why the full.html or my own implementation is being odd.

Thanks

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

Re: iOS Chrome window size

Thank you for the screenshots. I now see what you mean.
Try adding the following code to the <head> section of your web page:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • Registered: 2012-04-30
  • Posts: 24

Re: iOS Chrome window size

Yep, the viewport addition fixed it.  You can drop the maximum scale option if you want as well, but doesn't seem to make a difference.

Thanks

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

Re: iOS Chrome window size

On a regular web page, the 'maximum-scale' setting determines how far the user can zoom into the page.
In a 100% x 100% or expanded Juicebox gallery on a mobile device, this value is automatically set to 1 which is why you see no difference in removing it.

  • Registered: 2012-04-30
  • Posts: 24

Re: iOS Chrome window size

Would the maximum-scale=1 value work against enableTouchZoom option?

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

Re: iOS Chrome window size

Setting enableTouchZoom="TRUE" will allow users to touch zoom within the bounds set by the values in the viewport <meta> tag.
If you set 'initial-scale=1' and 'maximum-scale=1', then the gallery will initially be displayed at the maximum zoom scale.
The user could zoom out but not in. You could, however, set 'initial-scale=1' and 'maximum-scale=2' to allow the user to zoom in beyond the default scale value.
For more information on the viewport <meta> tag, please see this web page.