Question

我们有一个使用Cordova + PhoneGap创建的移动应用。由于某些原因，某些屏幕尺寸中没有显示图标。

<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<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">


<access origin="*" />
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" type="text/css" href="css/themes/jquery.mobile.flatui.min.css">
<link rel="stylesheet" type="text/css" href="lib/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="lib/datatables/css/responsive.dataTables.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">


    table.dataTable.display tbody tr.bills {
    background-color: #ff6666;
    color: white ;
    }

    table.dataTable.display tbody tr.co {
    background-color: seagreen;
    color: white ;
    }

    .responsiveImg{
                width: 100%;
                height: 100%;
                min-width: 0%;
                min-height: 0%;
                max-width: 100%;
                max-height: 100%;
            }

</style>



<div data-role="page" data-theme="a" id="pageLoading">
<div data-role="header">
    <h1>Loading...</h1>
</div>
<div data-role="main">
    <div class="ui-content">


    </div>
</div>

</div>
<div data-role="page" data-theme="a" id="login">
<div data-role="header">
    <h1>Login</h1>
</div>
<div data-role="main">
    <div class="ui-content">
        <form id="login-form" >

            <label for="user">Usuario:</label>
            <input type="text" name="user" id="user" value="">

            <label for="pass">Contraseña:</label>
            <input type="password" name="pass" id="pass" value="">

            <input type="hidden" name="phonekey" id="phonekey" value="">

            <input id="btnLogin" type="button" value="Ingresar"  data-theme="b">

        </form>


    </div>
</div>
<div data-role="footer">
    <div class="ui-content footerName">
        TITLE
    </div>
</div>
</div>

<div data-role="page" data-theme="a" id="home">
<div data-role="header">
    <h1>Home</h1>
</div>
<div data-role="main">
    <div class="ui-content">
        <div>
            <ul data-role="listview" data-inset="true" id="main_menu">
                <li data-icon="user"><a href="#my_data" data-transition="slide">Mis Datos</a></li>
                <li data-icon="bars" id="li_facturas"><a href="#page_bills" data-transition="slide">Mis Facturas</a></li>
                <li data-icon="comment" id="li_tickets"><a href="#page_tickets" data-transition="slide">Mis Tickets</a></li>

现在你可以在附图中看到在一个模拟屏幕上测试似乎没问题，但在其他图标中没有出现图标！

Icons OK Icons Missing

JQuery Mobile CSS在某些移动屏幕中不显示图标

0 个答案: