It's probably by design (by Apple) due to the iPad having a larger screen than the iPhone and, therefore, being able to display more information without having to hide the address bar to give the page content as much space as possible.
Unfortunately, I do not have an iPad on which to test so this is just speculation on my part, although this seems to be the general consensus of opinion in this (old) Apple forum thread: https://discussions.apple.com/thread/5528272

Are your iPad and iPhone running the same version of iOS? (What version is it?)
Apple have changed the way Mobile Safari works (with regard to full screen content and hiding toolbars) several times over the years.
For example, they introduced the 'mimimal-ui' viewport property in iOS 7 and removed it from iOS 8. (Try a web search for 'Apple minimal-ui' for more information.)

Also, it might help to know if you are referring to a full-browser Juicebox gallery page (a 100% x 100% gallery with no other content) or a web page with an embedded Juicebox gallery and other content (including vertical scrollbars).
Try viewing both types of pages (and also a page not containing a Juicebox gallery) to see if what you are reporting happens with all page types.

I suspect it's just the way that Mobile Safari works on the iPad, though.

That's right. As of v1.5.0, the Juicebox configuration fie can be JSON instead of XML (noted in this blog post).

It looks like you were just about there... just change your "image" to "images".

Here's a sample JSON configuration file to show the format required:

{
    "useFlickr": "FALSE",
    "galleryTitle": "Gallery Title",
    "textColor": "rgba(255,255,255,1.0)",
    "thumbFrameColor": "rgba(255,255,255,0.5)",
    "showOpenButton": "TRUE",
    "showExpandButton": "TRUE",
    "showThumbsButton": "TRUE",
    "useThumbDots": "TRUE",
    "useFullscreenExpand": "TRUE",
    "images":[
        {
            "imageURL": "images/IMG_0386.jpg",
            "thumbURL": "thumbs/IMG_0386.jpg",
            "linkURL": "images/IMG_0386.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0386",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0156.jpg",
            "thumbURL": "thumbs/IMG_0156.jpg",
            "linkURL": "images/IMG_0156.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0156",
            "caption": "Caption Text"
        },
        {
            "imageURL": "images/IMG_0214.jpg",
            "thumbURL": "thumbs/IMG_0214.jpg",
            "linkURL": "images/IMG_0214.jpg",
            "linkTarget": "_blank",
            "title": "IMG_0214",
            "caption": "Caption Text"
        }
    ]
}

Just be sure to name your JSON file with a .json file extension and point towards it in your gallery's embedding code using the configUrl configuration option, such as:

configUrl: "config.json"

I'm glad you've got it working.

You're welcome!

You're welcome.
I'm glad the workaround is a suitable solution until the bug is fixed.

Unfortunately, Juicebox-Pro does not support mouse wheel scrolling.

Juicebox-Pro was written from the ground-up (and is not just SimpleViewer-Pro ported to HTML 5).
As such, the two applications do not feature exactly the same functionality and there are not always direct translations between SimpleViewer-Pro's configuration options and those of Juicebox-Pro.
Please see this SimpleViewer blog entry for more information on the differences between SimpleViewer and Juicebox.

You might like to post your idea in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.

Otherwise, you could perhaps implement mouse wheel functionality manually using JavaScript and the Juicebox-Pro API (to determine the current image, the total number of images in the gallery and to show the previous or next image in the gallery when the mouse wheel is scrolled).
To see this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following HTML code as the gallery's 'index.html' file. If you want to be able to loop through the images (rather than stop at the first and last images), set var loop = true;.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    // Run following when gallery is ready
    jb.onInitComplete = function() {
        // Wheel handler function
        function wheelHandler(e) {
            var current = jb.getImageIndex(); // Get current image index number
            var loop = false; // Set to 'true' to loop through images with mouse wheel 
            if (e.deltaY > 0) { // If mouse wheel is scrolled down...
                if (current > 1) {
                    jb.showImage(current - 1); // Show previous image in gallery
                } else {
                    if (current === 1 && loop) {
                        jb.showImage(maximum); // Show last image if currently displaying first image and looping is enabled
                    }
                }
            }
            if (e.deltaY < 0) { // If mouse wheel is scrolled up...
                if (current < maximum) {
                    jb.showImage(current + 1); // Show next image in gallery
                } else {
                    if (current === maximum && loop) {
                        jb.showImage(1); // Show first image if currently displaying last image and looping is enabled
                    }
                }
            }
        }    
        var maximum = jb.getImageCount(); // Get total number of images in gallery
        document.getElementById('juicebox-container').addEventListener('wheel', wheelHandler); // Add 'wheel' event function
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I've tested this in Chrome, Edge and Firefox and it seems to work well.

Thank you for reporting this problem.
It looks like the problem happens when the image is dynamically cropped to fill the viewport. If the entire width of the image is visible, the problem cannot be seen.
I have logged a bug report with the developers and it should hopefully be fixed in the next version.
In the meantime, a workaround would be to set the image navigation position to be relative to the stage rather than the image by setting imageNavPosition="STAGE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image section').

Thank you for sharing your code.
Hopefully it will help others who want to achieve the same thing (to hide navigation buttons in the combination of Large Screen Mode and Touch Input Mode).

That's correct. Instead of saying "in Small Screen Mode/Touch Input Mode" I should probably have said "in Small Screen Mode and Touch Input Mode (the combination used on an iPhone which you referred to)".

For other users reading this thread, more information about Screen and Input Modes can be found in the Gallery Tour.

I'm not sure if you are specifically referring to thumbnail or main image navigation buttons but the current configuration options which change the visibility of the navigation buttons are:
showImageNav (which affects the main image nav buttons in both Small and Large Screen Modes) HOVER/ALWAYS/NEVER
showSmallThumbNav (which shows or hides the thumbnail nav buttons in Small Screen Mode) - TRUE/FALSE

Unfortunately, there's no configuration option available which would allow you to change the visibility of the navigation buttons for a specific Input Mode.

If you wanted to try to hide navigation buttons when they would normally be visible (for example), then you could perhaps detect which Screen Mode is currently being used (via the Juicebox-Pro API getScreenMode() method) and then implement some custom CSS and JavaScript to override Juicebox-Pro's own handling of the nav button visibility.
This might be fraught with difficulty (there are often unforeseen knock-on problems with such modifications) and I would not recommend it but you are free to try it if you like.
Please note that there is no Juicebox-Pro API method to determine which Input Mode is currently being used. You'd need to write your own routine to detect whether a touch screen is in use (if you wanted to).

Thank you for posting your suggestion in the Feature Requests forum thread.
It will certainly be seen by the developers there.

It looks like your gallery's Splash Page image is being squashed by the following custom CSS code from line 154 of your 'style.css' page:

.content-box .item img{display: block;width: 100% !important;height: auto;-webkit-transition: all .5s ease; /* Safari and Chrome */-moz-transition: all .5s ease; /* Firefox */-ms-transition: all .5s ease; /* IE 9 */-o-transition: all .5s ease; /* Opera */transition: all .5s ease;}

... specifically the width: 100% !important; entry.
This custom CSS rule is being applied to all <img> tags within .content-box .item (which is where your gallery is) including those in your gallery.
Normally, Juicebox center-crops the Splash Page to fill the viewport but your custom CSS overrides this and forces the image to be displayed with 100% width no matter what size the Splash Page is.

First of all, try removing !important from width: 100% !important; to see if this helps. (This might be all that is required to solve your problem.)

You could also target your custom CSS to only those elements on your web page that require them using further CSS selectors.

Another possible solution might be to use the following CSS:

.jb-splash-holder img {
    width: auto !important;
}

Add it to your web page after your 'style.css' file is loaded (maybe at the end of your gallery's 'jbcore/classic/theme.css' file) so that it is used in preference to your own custom CSS for the Splash Page image.

The only problem I can think of at the moment is that your PNG image will not be scaled when navButtonIconSize is used.

However, if navButtonIconSize is used, then the navigation button background (the semi-transparent grey circle) will be scaled and, if it is large enough, it will become visible behind your PNG image.
To counteract this, you can make the navigation button background completely transparent by setting navButtonBackColor="rgba(0,0,0,0)" (in JuiceboxBuilder-Pro's 'Customize -> Color' section).

Otherwise, as long as your PNG image looks OK in both Small Screen Mode and Large Screen Mode, I do not see any other obvious problems or pitfalls.

One possible solution would be to use the Open Image button on the Button Bar.
The Open Image button will open the image's linkURL (in a tab specified by the corresponding linkTarget).
(If an image does not have a linkURL entry, then the Open Image button will use the imageURL instead.)

Therefore, you could add linkURL entries to your gallery pointing towards the files that
The linkURL entries can be relative (to the page containing the gallery's embedding code) or absolute (in the form 'http://www.example.com/images/image0001.tiff').

If using JuiceboxBuilder-Pro to create or edit your galleries, you can add linkURL entries on the 'Images' tab. (Just click a thumbnail to reveal the input fields.)

If you like, you could change the Open Image button's icon (following the Using Custom Icons support section in the Theming Guide) and change its rollover tooltip text using the languageList configuration option. (Please see the International Gallery Text support section for details.)

Alternatively, you could just set up links in your image captions to link to your custom files.
You can add links to captions using HTML formatting (specifically the <a> tag) as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

If using the caption suggestion above, you could even use the download attribute in your caption link (supported by Chrome, Edge, Firefox and Opera) to instruct the browser to download your custom file instead of navigating to it.
A caption link (entered via JuiceboxBuilder-Pro's 'Images' tab) might look something like this:

Google's PageSpeed Insights tool can certainly be very helpful but it is also useful to remember that the results are just Google's ideal recommendations (without any knowledge of the content of the page or if any of their recommendations can even be implemented).

With regard to the 'render-blocking JavaScript and CSS' message, the results note:

That is correct but, knowing the content of your web page (the only content above-the-fold is your Juicebox gallery), it is absolutely necessary to wait for the 'juicebox.js' and 'theme.css' files to load before the gallery can be displayed and is visible.

The 'Prioritize visible content' message notes:

That, again, is true. Additional resources (the gallery's 'config.xml' file and the JavaScript, CSS, image and font files in the 'jbcore' folder) are required due to the design and required structure of Juicebox. However, there is nothing that can be done to incorporate all these resources directly into the gallery's HTML embedding page and the message is really nothing to worry about.

Knowing the way that Juicebox works (requiring the 'juicebox.js' and 'theme.css' files to be fully loaded before the gallery can be displayed and also requiring an external XML file and the 'jbcore' folder) the two warnings above can be put into context. They are not truly problems but necessities for the gallery to be displayed and function correctly.

Try entering other popular websites (such as 'http://google.com' or 'http://amazon.com') into Google's own PageSpeed Insights tool and you'll see that the results are often similar to those reported for your own Juicebox gallery web page.

When using any library or package which requires a number of external resource files (such as Juicebox and its 'jbcore' folder), you'll find that the PageSpeed Insights tool gives similar results.

You could certainly set HTTP cache headers within an .htaccess file if you like. Try a web search with terms such as 'http cache header htaccess' to find out more information.
However, such a decision (to force browser caching or not) is really up to the individual user (and not directly Juicebox dependent).

Incidentally, all these messages refer to the Speed section. The User Experience section for your Juicebox gallery page gives a score of 100/100 with the message "Congratulations! No issues found.".

I hope this helps to clarify things.