jquery 移动设备 ui 无法在移动设备上使用

Question

我想创建我的第一个 phonegap 移动应用程序，但 jQuery 移动应用程序已经出现问题。我已经包含了必要的文件，但页面转换在移动设备中不起作用 different.it 在使用 (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>

Answer 1

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

jquery 移动设备 ui 无法在移动设备上使用

jquery mobile ui is not working in mobile

javascript

mobile

jquery

user-interface

phonegap