If you have an iframe with fixed dimensions, then the iframe will be displayed at those dimensions in all browsers and on all devices.

You could certainly try using percentage dimensions for your iframe (as penum suggests above) but if the iframe is nested within any parent containers with fixed dimensions, then the iframe's own dimensions will become fixed, e.g. 100% x 800px = 800px.

You might like to take a look at this forum thread, entitled "How to get an IFrame to be responsive in iOS Safari?". Although you have a Windows mobile device, the principles will be the same and it might help with your problem. http://stackoverflow.com/questions/2308 … ios-safari

Another thing you might like to try is to use JavaScript to listen for a change in the user's browser window size and then assign new dimensions to your iframe accordingly.
There are examples of this technique in the Using a Resizable Gallery with a Header support section. In the online examples, JavaScript is used to dynamically set the gallery's dimensions. You could copy and modify the code as required to set your iframe's dimensions instead.

Also, as you have already uploaded your complete gallery folder to your web server, you might like to consider embedding your gallery directly on your page (using the baseUrl method as documented here) rather than using an iframe.
You could replace your iframe code with something like the following:

<!--START JUICEBOX EMBED-->
<script src="/gallery/welcome/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl: '/gallery/welcome/',
    containerId : 'juicebox-container',
    galleryWidth : '100%',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Just doing this and setting your gallery's width to 100% (so that it fills the width of its parent container), might be enough to solve your problem.

We recently uploaded a hotfix version of Juicebox (whose 'juicebox.js' file is labelled as v1.4.3.2) which addresses a problem whereby scrolling down a page containing an embedded gallery jumps to the top. This problem was known to happen in Mobile Safari in iOS 8 but please try upgrading your gallery to the latest version to see if it helps on your Windows phone, too.
Full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.

Please note that if you initiate a scroll gesture on top of the gallery itself, then this may be misinterpreted as the start of a gallery-specific gesture (such as a swipe to navigate between images) so you might need to be quite precise with your gestures.

I'm glad it's not a problem that you are too worried about but if there is a bug in Juicebox, we'd still like to know.

I would be very grateful if you could take a little time to check out this sample web page: [Test gallery removed.]
It is essentially a Juicebox-Pro v1.4.3 gallery embedded directly into a web page (rather than using an iframe) using exactly the same configuration options that your gallery does, sandwiched between two large amounts of text (but no other external JavaScript files or other HTML elements).

I doubt the AutoPlay is the reason for your problem but, just to be sure, here is the same setup as above but with autoPlayOnLoad set to FALSE: [Test gallery removed.]

Are you able to scroll to/through/past the sample galleries on your Windows phone?
Does the page ever jump to the top whilst scrolling?
What exactly is the device that your are using and what browser (and version number) do you use?

Many thanks for your help.

@wspollack

That was just text from the original demo pages I used as a template.

The new test pages I created were just to check whether the original poster could scroll past a gallery on his Windows phone which he doesn't seem to be able to do in his own web page.

The text referring to the Expand Button was irrelevant (and perhaps confusing). I have now removed it. Thanks for pointing it out.

Thank you for the additional information.

If I understand correctly, you do not see the images automatically change in the [Test gallery removed.] gallery. Is this correct? They should. The gallery sets autoPlayOnLoad="TRUE" and uses exactly the same configuration options that your own gallery uses. (I copied and pasted the options from your own gallery's XML file.) If you scroll down the page and then scroll on top of the gallery to scroll down further, the gesture may be interpreted as a swipe (to change the image) and this will stop the AutoPlay. This might be what is happening.
Also, does the original problem you posted above ("... I have another news section on the same page and struggle to page down and see this...") happen in the [Test gallery removed.] gallery?

A nested gallery should cause no problems with either page scrolling (or AutoPlay options).
It is certainly possible, though, that there could be a CSS or JavaScript conflict with some code on your web page.
The only way to isolate a gallery from all other code on your web page would be to load it into an iframe (which you have already done and which seemed to work so this suggests that there may, indeed, be some CSS or JavaScript code on your web page which is adversely affecting the gallery).
You could try removing CSS and JavaScript code from your web page to see if you can find the source of the conflict but it sounds like you have found a suitable workaround that you are happy with and that's absolutely fine.

It sounds like you might have a CSS conflict (global CSS rules on your web page that the gallery is inheriting).
However, if this were the case, then I would expect results to be consistent across different browsers.

First of all, please clear the caches of both your browsers to ensure that they are both fetching and using the most recent versions of your web pages from your server.

Differences in the display of web pages in different browsers can often be attributed to HTML errors on the page (some browsers may be more tolerant towards errors than others and might handle them differently).
Try validating the code on your web page with the W3C Markup Validation Service and fix any errors reported. This may help. If not, then at least we can eliminate HTML errors as being a contributing factor to your problem.

Unfortunately, I do not have access to an iPad on which to test so if you continue to experience difficulties, perhaps you could upload screenshots somewhere of what you see in both Chrome and Mobile Safari so that I can at least see the problem for myself.
Many thanks.

Also, it's just a hunch but I've seen problems with percentage-dimension iframes before in Mobile Safari (though usually with height rather than width).
Try changing:

<iframe src="gallery/welcome/index.html" width="100%" height="275" frameborder="0" scrolling="no"></iframe>

... to:

<iframe src="gallery/welcome/index.html" style="width: 100%;" height="275" frameborder="0" scrolling="no"></iframe>

... to see if it helps.
It might not make a difference but it should be quick and easy to try.

Thank you for sending me a screenshot of your problem.

From the look of the screenshot, it certainly looks like Mobile Safari is having a problem with your percentage-width iframe.
What generation of iPad do you have and what version of iOS does it have installed? Perhaps there is a problem with your particular version of Mobile Safari which can be fixed by upgrading your version of iOS.

I suspect that you might have similar sizing issues no matter what content you load into your iframe.
Try loading a different web page (such as http://juicebox.net/) into your iframe to see how your main page looks.
Does the size of the iframe look OK in Mobile Safari with content other that the gallery loaded into it?

Your iframe has a width of 100% but the browser will need to know what its actual width should be 100% of, so please make sure that all parent containers of your iframe have widths defined using CSS. Also, try including the dimensions of your iframe's parent containers as inline CSS (similar to the note for Using Percentage Heights but with widths instead).

This forum thread regarding "How to get an IFrame to be responsive in iOS Safari?" might also be of interest: http://stackoverflow.com/questions/2308 … ios-safari

However, I would still recommend embedding your gallery directly in your web page (rather than using an iframe).
Maybe you could try this again.

With regard to the scrolling issue, if you can scroll past the gallery in my test page ([Test gallery removed.]), then the problem may lie somewhere within the code on your web page.
If you load the gallery into an iframe, then try embedding the gallery directly into your web page to see if the scrolling problem still occurs. (There may be some kind of problem scrolling past iframes on a Windows phone.)
If you already embed the gallery directly in your web page, then try removing all external CSS and JavaScript files from your page, one at a time, and check the functionality after removing each one until you find the source of the conflict.

I hope these notes help.

Sorry my windows phone uses explorer 11 not safari. Getting confused with iPad/phone

Hi Steven,

It might be a good idea to take a step backwards just now and clarify a few things.
Using my test page: [Test gallery removed.]
(1) On your iPad, can you scroll down past the gallery to see the text below the gallery?
No issues with ipad Mini
(2) On your Windows phone, can you scroll down past the gallery?
Windows Phones use Explorer 11 Mobile and this is where the problems start, when loading above you just get the first part of text and the screen is frozen you are not able to view any part of gallery. A reading icon pops up in explorer which when pressed compresses text into a mobile view and you can scroll down to gallery however all you can see are two fixed images with no option either auto or manual to view other photos. See reading view section on below link.

http://blogs.msdn.com/b/ie/archive/2014 … phone.aspx

(3) On your iPad, does the AutoPlay work (do images change automatically)?
No issues with ipad Mini
(4) On your Windows phone, does the AutoPlay work?
See answer to option 2
For (3) and (4) above you could try this test gallery instead: [Test gallery removed.]
Works fine on both ipad & Windows phone in full screen mode.
Same gallery, just no text on the page so no need to scroll down the page and perhaps accidentally stop the AutoPlay.

HI Steven,

Finally cracked it, the Reading View icon code has worked. I have now applied the embedded version gallery and it works fine on Windows Phone.

<meta name="IE_RM_OFF" content="true">

Hi Steven

Thought removing the reading view icon in exporter. V11 for windows phone had solved problem but although the gallery works cannot scroll below to next section on webpage. This is not the case on iPhone which behaves perfectly.