我想创建我的第一个Phonegap移动应用程序，但jQuery Mobile已经出现问题。我已经包含了必要的文件，但页面过渡在移动设备中不起作用 different.it 使用 (phonegap( 生成 apk 后在桌面上运行良好，它在移动设备中不起作用。
在此处输入图像描述
<script id="popup-arrow-script">
$.mobile.document.on( "click", "#open-popupArrow", function( evt ) {
$( "#popupArrow" ).popup( "open", { x: evt.pageX, y: evt.pageY } );
evt.preventDefault();
});
</script> <style id="tooltip-btn">
.ui-btn.my-tooltip-btn,
.ui-btn.my-tooltip-btn:hover,
.ui-btn.my-tooltip-btn:active {
background: none;
border: 0;
}
<style id="popup-arrow-css">
.clickable-area {
display: block;
width: 100%;
height: 300px;
background-color: #ffefef;
}
.clickable-area:focus {
outline: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup - jQuery Mobile Demos</title>
<!--<link rel="shortcut icon" href="../favicon.ico">-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="demos/_assets/css/jqm-demos.css">
<script src="demos/js/jquery.js"></script>
<script src="demos/_assets/js/index.js"></script>
<script src="demos/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<div data-role = "page" id = "pageone">
<div data-role = "header" style="background-color: #3f51b5;color: white;">
<h1>Health care</h1>
</div>
<div data-role = "main" class = "ui-content">
<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop" style="margin-left: 60%;background-color: #3f51b5;color: white;">Settings</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all" style="width: 120%;">
<form>
<div style="padding:10px 20px;">
<h3>Add/Update</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="Name" data-theme="a">
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="text" name="pass" id="pw" value="" placeholder=" Phone-Number" data-theme="a">
<label for="textarea-1">Details</label>
<textarea name="textarea-1" id="textarea-1"></textarea>
<label for="pw" class="ui-hidden-accessible">Select type</label>
<select name="select-native-1" id="select-native-1">
<option value="1" data-theme="a">Choose type</option>
<option value="1">Doctor</option>
<option value="2">Neighbour</option>
<option value="3">Relative</option>
<option value="4">Ambulance</option>
</select>
<button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check" style="background-color: #3f51b5;color: white;">Add</button>
</div>
</form>
</div>
<div style=" margin-left: 41%;">
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/calladoctor.png" alt="" style="width: 30%"/></span> </a><br>
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callambulance.jpg" alt="" style="width: 50%"/></span> </a><br>
<a href = "#" class = "ui-btn ui-btn-inline" style="width: 20%"><span ><img src="images/callneighbour.jpg" alt="" style="width: 40%"/></span> </a>
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>