I was on project to make a web page with two iframes to have dual window on tablets and mobile phones , i thought it was an easy job but the problems were beyond expectation. the web site work fine on windows browser chrome . before introducing the problems I will provide with the code and the link of the web site . http://lotav.com/v1 this one the iframe has a height of 45%. http://lotav.com/v2 this one has the same code the only difference is the height is fixed as 200px. the code is as following for lotav.com/v1
<!DOCTYPE html>
<html style="height: 100%;min-height:100%;">
<head>
<meta name="viewport" content="width=device-width">
<script>
function setURL(url){
var url=prompt("Please enter your url:","http://");
document.getElementById('upper').src = url;
}
function setURL2(url2){
var url2=prompt("Please enter your url:","http://");
document.getElementById('lower').src = url2;
}
</script>
<title>Dual Window</title>
<body style="height:98%;min-height:98%;max-height:98%;">
<input Value="Upper" type="button" onclick="setURL();" />
<input Value="Lower" type="button" onclick="setURL2();" />
<iframe id="upper" width="100%" height="45%" src="http://ejarwall.com" sandbox="allow-same-origin">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="lower" width="100%" height="45%" src="http://ejarwall.com" sandbox="allow-same-origin">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</head>
</html>
for lotav.com/v2
<!DOCTYPE html>
<html style="height: 100%;min-height:100%;">
<head>
<meta name="viewport" content="width=device-width">
<script>
function setURL(url){
var url=prompt("Please enter your url:","http://");
document.getElementById('upper').src = url;
}
function setURL2(url2){
var url2=prompt("Please enter your url:","http://");
document.getElementById('lower').src = url2;
}
</script>
<title>Dual Window</title>
<body style="height:98%;min-height:98%;max-height:98%;">
<input Value="Upper" type="button" onclick="setURL();" />
<input Value="Lower" type="button" onclick="setURL2();" />
<iframe id="upper" width="100%" height="200pxhttp://www.autotrader.com/cars-for-sale/" src="http://ejarwall.com" sandbox="allow-same-origin">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe id="lower" width="100%" height="200px" src="http://www.autotrader.com/cars-for-sale/" sandbox="allow-same-origin">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</head>
</html>
on auto trader find page there is a drop down list menu when you chose the make the model option opens, I guess it is done by Ajax the problems I'm facing only with mobile and tablets browsers it works fine on the PC.
the issues are : 1) Android browser 4.2 , Iframe height OK, drop down list works Ajax drop down list doesn't re act,
2) Chrome on android 4.2, Height 45% works fine, Normal drop down works ok, Ajax drop down doesn't react!..
3) Android 4.1 browser, Doesn't open normal drop down list, and for sure the Ajax won't work, Height 45% works fine..
4) Safari on iPhone and iPad new version, Initial it shows the height 45%, When the page load it loads the whole page and disregards the 45%, It shows the normal drop down list, Doesn't react for re act Ajax drop down list, On the fix height (lotav.com/v2) also it disregard the fixed height in pixles.
5) On opera classic on android 12.10 It disregards the fixed height and percentage height of the iframe It shows normal drop down and re acts for Ajax drop down list.. a brief idea about the web site the upper will request a url to load it in the upper iframe and the lower input botton will request a url to load it in the lower iframe .. all the JavaScripts works fine .. and the whole website works fine on the PC .. also I know there is useless css like min and max height but if they are there or not it doesn't make a difference. I searched lengthy about this issue but it seems not pointed for iframes for mobiles and tablet browsers. thanks for reading :) and I wish this benefits others .