The sample page is here: http://mobiletest.swell-sites.com/gallery-test.html
It looks fine on a computer screen but on my iPhone the gallery doesn't function IN the page, you have to expand to the full page version.
What you are seeing is the Splash Page. This is the default behavior in Small Screen Mode.
For more information about Juicebox and Screen Modes, please see here.
If you would rather have Juicebox display the gallery in place of the Splash Page, set showSplashPage="NEVER".
Alternatively, you could force Juicebox to use Large Screen Mode in all browsers and on all devices by setting screenMode="LARGE".
What I want, on all displays, is for the picture to appear as wide as the screen / or div container, and for the thumbnails to be immediately underneath it.
If you want thumbnails to be displayed below the main image when the gallery is displayed in all browsers and on all devices, then you would have to set screenMode="LARGE".
I think that on a phone and an ipad I'd like the container to be 50% of the height of the total screen
It would be very difficult to use the controls in a Large Screen Mode gallery whose height is 50% of an iPhone screen. This is why the default behavior of Juicebox is to use a Splash Page to then open the gallery fullscreen where the controls are slightly larger and easier to tap.
Could I add a line of code to change the rules based on the width of the screen and or device?
Juicebox already adapts to different devices and screen sizes and it would not be recommended to try to override Juicebox's own detection mechanisms with your own JavaScript code. Please see the Gallery Tour for details.