It looks like the visible display of a iphone 6 is 559px in safari. The address bar and bottom tool bar taking up some real estate. How do you get the visible height (559px) using javascript or jquery?
run the snippet and inspect with developer for iphone 6,7,and 8
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height">
<title>space</title>
<style>
body{
margin:0;
height:100%;
position:fixed;
top:0px;
}
div{
height:110px;
width:100%;
position:fixed;
background-color:blue;
}
#a1{
top:0px;
background-color:lightgreen
}
#a2{
top:110px;
}
#a3{
top:220px;
background-color:green;
}
#a0{
top:330px;
height:7px;
}
#a4{
top:337px;
background-color:green;
}
#a5{
top:447px;
}
#a6{
top:557px;
background-color:green;
}
</style>
</head>
<body>
<div id='a1' onclick="myFunction()">110</div>
<div id='a2'>220</div>
<div id='a3'>330</div>
<div id='a0'>337</div>
<div id='a4'>447</div>
<div id='a5'>557</div>
<div id='a6'>667</div>
<script>
function myFunction(){
var h = window.innerHeight;
console.log(h);
}
</script>
</body>
</html>
