• Registered: 2012-05-01
  • Posts: 97

Topic: JuiceboxBuilder-Pro meta name viewport in index.html

JuiceboxBuilder-Pro add the following
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />

to index.html, user-scalable=0 is against Web Content Accessibility Guidelines (WCAG) with the following explanation:
Warning: Usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.

Why does JuiceBuilder-Pro add this meta data and why are the viewers not allowed to change the scale.

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

Re: JuiceboxBuilder-Pro meta name viewport in index.html

Please see this link for details: https://www.juicebox.net/support/embedd … y-behavior

Expand Gallery Behavior

The optional 'Expand Gallery' button expands the gallery to fill the browser window. Enable this by using the 'showExpandButton' option. To make the gallery expand to fill the entire desktop screen, use the 'useFullscreenExpand' config option.

Note that expanding the gallery will cause the embedding page's body tag to be set to width '100%' so the embedding page layout may shift on expanding. To avoid this, add an additional wrapper div around page content with a defined width.

Expanding Galleries on iOS

On iOS, expanding a gallery opens a new HTML page. This is to avoid issues with incorrectly scaled content when switching between regular and expanded mode.

To avoid opening in a new page on iOS, the solution is to lock the viewport of the embedding page. This will prevent user scaling of the page via pinch gestures. Juicebox will detect that the viewport is locked and expand in the same page. To do this, add the following meta tag to the head of the embedding page's HTML code.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

If you want to force a specific expand behavior you can use the 'expandInNewPage' config option.

  • Registered: 2012-05-01
  • Posts: 97

Re: JuiceboxBuilder-Pro meta name viewport in index.html

Thanks for the explanation
No, I am not interested in ExpandInNewPage for desktops. What I am interested in is that smartphone viewers can zoom in a picture.  user-scalable=0 is blocking this and iOS viewers has to accept that the picture opens in a new HTML page.

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

Re: JuiceboxBuilder-Pro meta name viewport in index.html

You can certainly remove the meta tag from your gallery web pages (or just change scalable=0 to scalable=1) but you might find that pinch zooming is rather difficult (as the pinch zoom gesture can often be mistaken for the start of a navigation swipe).
It might not be ideal but if you want visitors to be able to zoom into your pictures, I'd recommend using the Open Image button which will display the image on a page of its own where it can be pinch zoomed with ease.