Response title
This is preview!
Jquery Mobile, iOS 8 PhoneGap issue
in jQuery Mobile
•
8 years ago
All i am not sure if this is a Jquery Mobile issue, or PhoneGap issue
but if you create a PhoneGap project and only support Landscape and use
Jquery Mobile, then run in the simulator or device with iOS 8 the screen
displayed is chopped up into 3 sections. However if you rerun the
project and select iOS 7 simulator everything is displayed correctly.
I also noticed if you select Portrait and landscape and it comes
up portrait it is fine. What is funny is if you keep rotating the
screen until you are in landscape it displays everything as fine.
This happens with Jquery Mobile 1.4.2 and 1.4.3. enclosed is
the code i am using to recreated
any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name ="msapplication-tap-highlight" content ="no" />
<meta name ="format-detection" content ="telephone=no" />
<meta charset="utf-8">
<link rel = "stylesheet" href = "AppCSS\jquery.mobile-1.4.3.min.css" />
</head>
<style type = "text/css"
div.div_Body {
height: 100%;
position : relative ;
border:2 px solid DarkGoldenrod;
border-radius: 7px;
font: bold 14 px Arial;
font-family:Arial, Helvetica, sans-serif;
color:Black;
text-align:center;
background: #FFFFFF;
}
</style>
<body id = "body" class = "noselect" >
<script>
window.addEventListener( 'load' , function () { document.addEventListener( 'deviceready' , function () {onDeviceReady() }, false ); }, false );
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
console.log("in device ready");
console.log("height " + screen.height);
console.log("width " + screen.width);
var myscreenWidth = screen.width;
}
</script>
<div data-role= "page" class= "ui-page " data-theme= "b" >
<div data-role= "header" class= "ui-header" data-theme= "b" >
<h1 class= "ui-title" tabindex= "0" role= "heading" aria-level= "1" > Test </h1>
</div>
<div data-role ="content" style ="height: 670px" class ="ui-content div_Body" role ="main">
<p >Send Help</p>
</div>
</div>
<script type ="text/javascript" charset ="utf-8" src ="cordova.js"></script>
<script src ="AppJS\jquery-1.9.1.min.js"></script>
<script src ="AppJS\jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
1