Question

我正在使用jquery mobile和phonegap开发一个应用程序，它在网络上运行良好，检查它。 http://zabatni.azurewebsites.net 检查此网址中的应用，然后查看此图片！[在此处输入图像说明] [2]

https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10815890_590581161042731_1362713195_n.jpg?efg=eyJvbGF0Ijo4MH0%3D&oh=41a5dfdc51c34472b435a10f805a5679&oe=547F792B&gda=1417623611_d3eca3b5ed6dcabe7d24d5cbd11a05be

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">

    <title>Zabatni</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="css/index.css" />

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />

    <link rel="stylesheet" href="css/theme/maintheme.css" />
  <link rel="stylesheet" href="css/theme/jquery.mobile.icons.min.css" 

  </head> 
<body> 

<div data-role="page" id="mainpage" data-theme="b">

    <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
    </div><!-- /header -->

    <div data-role="content" class="contentcontainer" >   
    <div class="ui-grid-c">
<div class="ui-block-a"><a href="#category"> <img src="img/maincategoryicons/mata3em.png" class="maincategoryicons" /> <p class="categorytitle" lang="ar">ظبطني<br/>مطاعم</p></a></div>
<div class="ui-block-b" ><img src="img/maincategoryicons/cafes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>كافيهات</p></div>
<div class="ui-block-c"><a href="#" onclick="myalert()"><img src="img/maincategoryicons/clothes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>ملابس</p></a></div>
<div class="ui-block-d"><img src="img/maincategoryicons/agheza.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أجهزة</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/realestate.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>عقارات</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/furniture.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أثاث</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/cars.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سيارات</p></div>
<div class="ui-block-d"><img src="img/maincategoryicons/tourism.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سياحة</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/jewllery.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>مجوهرات</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/accessories.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>اكسسوارات</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/market.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>ماركت</p></div>
<div class="ui-block-d"><img src="img/maincategoryicons/ceramic.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>سيراميك</p></div>
<div class="ui-block-a"><img src="img/maincategoryicons/shoes.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>أحذية</p></div>
<div class="ui-block-b"><img src="img/maincategoryicons/gym.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>جيم</p></div>
<div class="ui-block-c"><img src="img/maincategoryicons/glasses.png" class="maincategoryicons" /><p class="categorytitle" lang="ar">ظبطني<br/>مطاعم</p></div>




</div>

        </div><!-- /content -->
<div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#search" data-icon="phone">Search</a></li>
        </ul>
    </div><!-- /navbar -->
</div>
</div><!-- /page -->
<div data-role="page" id="aboutuspage" data-theme="b" >
      <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /></div>
    </div><!-- /header -->
    <div data-role="content">
        All copyrights served &copy; Albara
    </div>
<div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#mainpage" data-icon="home">home</a></li>
            <li><a href="#" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#settings" data-icon="gear">Settings</a></li>
            <li><a href="#search" data-icon="search">Search</a></li>

        </ul>
    </div><!-- /navbar -->
</div>

</div>
<div data-role="page" id="contactus" data-theme="b"></div>




    <!--newpage-->
    <div data-role="page" id="search" data-theme="a">
      <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
    </div><!-- /header -->
    <div data-rolw="content">
        <ul data-role="listview" data-filter="true" class="search" >
           <li><a href="#"><img src="images/nike.jpg">جزمة نايك برباط</a></li> 
           <li><a href="#"><img src="images/pizza.jpg"> بيتزا بالمشروم</a></li> 
           <li><a href="#"><img src="images/phone.jpg">موبايل ايفون بخطين</a></li> 
           <li><a href="#"><img src="images/ring.jpg">خاتم الماز بينور في الضلمة</a></li> 
           <li><a href="#"><img src="images/apartment.jpg">شقي ايجار جديد جدا</a></li> 

        </ul>
    </div>
    <div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#" data-icon="phone">Search</a></li>
        </ul>

    </div><!-- /navbar -->
</div>
    </div>
<div data-role="page" id="category"data-theme="a">
 <div data-role="header">
  <div id="container"> <img src="images/logo-no-r.png" id="logo" alt="logo" /> 
  </div>
   </div><!-- /header -->
<div data-role="content">
    <ul data-role="listview" data-filter="true">
        <li><img src="images/pizza.jpg">بيتزا</li>
        <li><img src="images/categoryimages/kebda.jpg">سندوتش كبجة</li>
        <li><img src="images/categoryimages/ta3mia.jpg">شندوتش طعمية</li>
        <li><img src="images/categoryimages/msmt.jpg">كوارع</li>
    </ul>

</div>
   <div data-role="footer"  data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#mainpage" data-icon="home">home</a></li>
            <li><a href="#aboutuspage" data-icon="user">About Us</a></li>
            <li><a href="#contactus" data-icon="phone">Contact us</a></li>
            <li><a href="#" data-icon="gear">Settings</a></li>
            <li><a href="#" data-icon="phone">Search</a></li>
        </ul>
    </div><!-- /navbar -->
</div>

</div>
<script>
function myalert(){
    alert("Hello! I am an alert box!!");

}

</script>
   <script src="css/jquery-1.11.1.min.js"></script>
    <script src="css/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/index.js"></script>
        <script type="text/javascript" src="cordova.js"></script>

</body>
</html>

当我测试它甚至使用涟漪它工作得很好，为什么应用程序ui改变以及如何使它看起来像网站？

Answer 1

Jquery-mobile很重要。它无法在移动应用上顺利运行。
我建议你使用Ionic或Onsen-UI框架。如果您了解AngularJS，Ionic框架是混合应用程序的最佳选择。它们非常轻巧，工作顺畅。

Answer 2

执行以下步骤

为什么您的某个样式链接不包含括号。请更新它。

    <link rel="stylesheet" href="css/theme/jquery.mobile.icons.min.css"

您是否尝试创建Android / IOS项目以检查是否存在未知异常？
您的网站在移动浏览器中的效果如何？试试。这将告诉您root是来自phonegap配置还是您网站的代码。

Jquery移动应用程序在浏览器上工作正常但不适用于应用程序

2 个答案: