CSS在设备上不起作用答案

【问题标题】：CSS not working on deviceCSS在设备上不起作用
【发布时间】：2015-07-07 09:39:10
【问题描述】：

我不明白为什么这个 CSS 在我的设备（Android 4.4 和 iOS 8.0）上不起作用：

body {
    background: -webkit-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, $gcolor1, $gcolor2, $gcolor3, $gcolor4); /* Standard syntax */
    background-attachment:fixed;
    background-position: center;
}

body .view-container.tab-content {
  background-color: transparent;
}

body .pane, .menu, .view, .list, .item       {
    background: transparent;
}

背景只是变成白色，尽管它在浏览器（在手机和 Chrome 上）中确实有效。怎么回事？

仅供参考，我使用 Phonegap Build 部署应用程序，并将此 CSS 应用于 Ionic/Angular 项目。

【问题讨论】：

你怎么称呼你的 css 可以给我看看
@Sport：正如您在回答中指出的那样，位于 ionic.min.css 下方

标签： android ios css cordova

【解决方案1】：

可能缺少这个：

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$gcolor1), color-stop(33%,$gcolor2), color-stop(66%,$gcolor3), color-stop(100%,$gcolor4));

这应该是特定于 Safari 4+ 和 Chrome 的

【讨论】：

您能否提供编译后的css，以便我们查看实际的样式表是什么？同样可以肯定的是，尝试将背景更改为红色，例如看看它是否有任何反应。
是的，我尝试将背景更改为红色，如下所示： background: red !important;那行得通。如何共享编译后的样式表（非常大的文件）？
只粘贴您设置正文样式的部分。编译可能以某种方式破坏了语法。它必须在渐变 css 中的某个地方，否则它没有任何意义......

【解决方案2】：

试试这个

在Index.html中添加这个

  <link href="css/ionic.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="css/index.css" />

然后将你的 css 文件复制到 CSS 文件夹中

在 index.html 中添加这个

    <script>
 if (navigator.userAgent === undefined) {
                    navigator.__defineGetter__('userAgent', function() {
                                               return("Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit");
                    });
                }

</script>

【讨论】：

不，我已经有了这行代码。它必须与渐变相关。
不幸的是也没有工作。我正在考虑只拍一张照片。