Skip to end of metadata
Go to start of metadata

iOS based browsers do not reliably calculate iframe heights, more or less because of touch events.  Therefore, if you are using the iFrame output from the 360 View Creator and you are trying to dynamically generate the size of the iFrame then we recommend you follow the steps listed in this tutorial.

This Article Is Only Needed When the iFrame Size is NOT Fully Defined

The issue with iOS devices is ONLY an issue if the iFrame size is NOT fully defined and one tries to generate its sizes dynamically. If the width and height definitions are given then the iFrame will work on iOS devices, without the use of any additional scripts. When the iFrame size (width and height) is fully defined this article can be ignored.

Step-by-step guide

To use a dynamic iFrame size on iOS, please follow these two steps:

  1. Add the following script into the header (between <head> and </head>) of your page, or to the beginning of the body section (<body>):

    <script>function isClientIosDevice(){var e,t=navigator.userAgent,i=new RegExp("iphone|ipad|ipod");return e=i.test(t.toLowerCase())?!0:!1}function setElementHeight(e,t){e.style.height=t}</script>

  2. Inside every iframe tag add the following attribute:

    onload="if (isClientIosDevice()) {setElementHeight(this, ([HEIGHT-IN-PERCENTAGE-VALUE]/4)+'%');}"

    where, HEIGHT-IN-PERCENTAGE-VALUE is the actual height of your iframe in percentages when viewed on non-iOS devices.

 

Here is an example of how your HTML document will look like with the above two steps added to your code:

Sample End-to-End Script When iFrame Size Not Fully Defined

<!DOCTYPE html>
<html>

<head>
<script>
function isClientIosDevice(){var e,t=navigator.userAgent,i=new RegExp("iphone|ipad|ipod");
return e=i.test(t.toLowerCase())?!0:!1}function setElementHeight(e,t){e.style.height=t} </script> </head> <body> <div style="width: 500px; height: 500px;"> <iframe src="http://stream.iconasys.com/viewer.php?
application=360&type=iframe&id=da5da24745e528aee1f9c8f7d584d54f9abac954"
style="border:0px; max-width: 100%; max-height: 100%;" marginheight="0" marginwidth="0" scrolling="no" allowfullscreen width="500" onload="if (isClientIosDevice()) {setElementHeight(this, (18/4)+'%');}"></iframe> </div> </body> </html>
 

 

As a comparison, the function isClientIosDevice() is not needed when the iFrame size is fully defined.  Notice that in this second case we have defined

width="500"
height="500"

and therefore the additional script is not needed:

Sample Script When iFrame Size is Fully Defined

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<div style="width: 500px; height: 500px;">

<iframe src="http://stream.iconasys.com/viewer.php?
application=360&type=iframe&id=da5da24745e528aee1f9c8f7d584d54f9abac954"
style="border:0px; max-width: 100%; max-height: 100%;" marginheight="0" marginwidth="0" scrolling="no" allowfullscreen width="500" height="500">
</iframe>
</div>

</body>
</html>

Please note that modern browsers are using HTML5 standard, thus older standards like HTML 4 are not being recognised by some browsers (e.g. Safari on iOS). Properties like width and height are deprecated in modern browsers. Users can use our function in order to automatically resize the iframe on detected devices like iPhone for example or they can modify their CSS for width and height values.

 

The content from Stream Server ( http://stream.iconasys.com/viewer.php?application=360&type=iframe&id=da5da24745e528aee1f9c8f7d584d54f9abac954) does not modify the iframe which is strictly related to the user's code on his website!