CSS 新手：CSS 未在 Android 上渲染但使用 Visual Studio Ripple Virtual Nexus (Galaxy) 渲染

Question

我的 CSS 从 Ripple Nexus(Galaxy) 和我的 Samsung Galaxy 渲染得非常彻底。注意按钮和 UL 元素。我没有找到 Android 不支持我尝试使用的 CSS 的地方，而且页眉和页脚似乎可以识别 CSS。有人可以在正确的方向推动我吗？

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script src="scripts/app.js"></script>
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <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">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link href="css/sticky-footer.css" rel="stylesheet">
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>GPS</title>
</head>
<body ng-controller="MainCtrl as main">

    <div class="container-fluid">

        <div class="page-header">
            <h1>My Cool GPS</h1>
        </div>



        <div class="container btn-group-vertical btn-group-lg btn-block text-uppercase panel panel-default panel-borderless">
            <button type="button" class="btn btn-primary" ng-click="main.getPosition()">Current Position</button>
            <button type="button" class="btn btn-success" ng-click="main.watchPosition()">Watch Position</button>
            <button type="button" class="btn btn-danger" ng-click="main.stopWatching()">Stop Watching</button>
        </div>



        <div class="panel panel-default">
            <ul class="list-group">
                <li class="list-group-item list-group-item-info text-uppercase">Increment: <span class="label label-primary h1" ng-bind="main.incrementer"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">distance: <span class="label label-primary h1" ng-bind="main.distance"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">latitude: <span class="label label-primary h1" ng-bind="main.latitude"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">longitude: <span class="label label-primary h1" ng-bind="main.longitude"></span></li>
                <li class="list-group-item list-group-item-info text-uppercase">accuracy: <span class="label label-primary h1" ng-bind="main.accuracy"></span></li>
            </ul>
        </div>
    </div>




    <footer class="footer">
        <div class="container">
            <p class="text-muted">My Cool GPS</p>
        </div>
    </footer>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>


</body>
</html>

CSS:

form {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

#title {
    font-size: 16px;
}

#summary {
    font-size: 35px;
}

#summary img {
    float: right;
}

#error-msg {
    text-align: center;
    margin-top:  50%;
    font-weight: bold;    
}

.page-header{
    text-align:center;
}

.footer {
    text-align:center;
}

.panel-borderless {
    border: 0;
    box-shadow: none;
}

Answer 1

您没有在其中一个中加载 bootstrap.min.css。

如果它没有在 phone 上加载，那么我怀疑是白名单问题 - 当 phone 连接到 PC 运行时尝试使用 chrome://inspect/#devices chrome- 这应该能让您看到问题所在。

要问的另一个问题是您是否应该只包含 CSS 的静态副本而不是使用 CDN

Answer 2

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstra‌p.min.css" rel="stylesheet">

能不能加个https再试试？

CSS 新手：CSS 未在 Android 上渲染但使用 Visual Studio Ripple Virtual Nexus (Galaxy) 渲染

CSS Newbie: CSS not rendering on Android but does render with Visual Studio Ripple Virtual Nexus (Galaxy)

android

css

cordova

phonegap-plugins

ripple