document.addEventListener("deviceready", MyDeviceReady, false)
function MyDeviceReady() {
if (device.platform == "iOS") {
document.getElementById("header").style.marginTop = "20px";
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.inline-svg-1.4.5.min.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<title>GetDeviceInfo</title>
<style>
td {
text-align: right;
}
table {
border: 1px solid red;
width: 100%;
border-collapse: collapse;
}
table tr td {
border: 1px solid red;
}
table tr td:first-child {
width: 100px;
}
table tr td:last-child {
text-align: left;
}
div[data-role="content"] {
border: 1px solid red;
margin: 0 -16px 0 -16px;
}
/* div[data-role="header"] {
margin-top: 20px;
}*/
</style>
</head>
<body>
<div data-role="page" id="pagaHome">
<div data-role="header" data-position="fixed" data-tap-toggle="fixed" id="header">
<h1>Home</h1>
</div>
<div data-role="content">
<button class="ui-btn" οnclick="GetDeviceInfo()">GetDeviceInfo</button>
<table>
<tr>
<td>Model:</td>
<td id="model"></td>
</tr>
<tr>
<td>Platform:</td>
<td id="platform"></td>
</tr>
<tr>
<td>Version:</td>
<td id="version"></td>
</tr>
<tr>
<td>DeviceID:</td>
<td id="uuid"></td>
</tr>
</table>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>