Many of us solving issues related iphones, This is one of the issue that found in
my practises. I want to show iframe on a page using following coding, it obiviously
work on all browsers and mobiles except iphone browsers. It is very good stuff from
I am wondering in my practises.
Issue : On Iphone, after refreshing page I have reproduced this issue. Height of
an iframe increases automatically after every refreshment of page.
It will be solved in some cases after removing style of height of div id="mainDvContainer"
from test.html, but in some cases you may loss your original design.
Suppose, we have two html pages test.html and main.html
test.html
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<title>main</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cleartype" content="on" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div style="height: 100%;">
<div style="height: 350px; width: 100%;
background-color: green;">
Test.html 11<br>
Test.html 12<br>
Test.html 13<br>
Test.html 14<br>
Test.html 15<br>
Test.html 16<br>
Test.html 17<br>
Test.html 18<br>
Test.html 19<br>
Test.html 20<br>
Test.html 21<br>
Test.html 22<br>
Test.html 23<br>
Test.html 24<br>
Test.html 25<br>
Test.html 26<br>
Test.html 27<br>
</div>
</div>
</body>
</html>
]]>
main.html
<![CDATA[
<!--doctype html-->
<html>
<head>
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cleartype" content="on" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="mainDvContainer" style="height: 100%; width: 100%;
background-color: pink;">
<iframe src="test.html" id="testContainer" name="container"
framespacing="0" frameborder="0" scrolling="no"
allowtransparency="true" allowfullscreen="true"
webkitallowfullscreen="true" mozallowfullscreen="true"
marginheight="0" marginwidth="0" width="100%"
height="100%" style="top: 0px; right: 0px; bottom: 0px;
left: 0px; background-color: red;">
</iframe>
</div>
</body>
</html>
]]>
Browse main.html page in browser of IPhone device. You will see Iframe height increases
automatically for every click on reload/refresh button of browser. So if any one
getting this problem or if you know any logic behind that then please share it........
Conclusion :
I hope that this article would have helped you in understanding Iphone problem with
Iframes. Please share your knowledge if you know more about this. Your feedback
and constructive contributions are always welcome.
No comments:
Post a Comment