jquery mobile ui无法在移动设备上运行

Question

我想创建我的第一个phonegap移动应用程序，但已经有jQuery Mobile的问题。我已经包含了必要的文件，但页面转换不适用于移动不同。在使用（phonegap）生成apk后它在桌面上工作正常它在mobile.enter图像描述这里UI在移动设备中被更改。

enter image description here

<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>