为什么在移动设备上查看时我的渐变会停止？答案

【问题标题】：Why does my gradient stop when viewing on mobile devices?为什么在移动设备上查看时我的渐变会停止？
【发布时间】：2013-11-18 16:54:53
【问题描述】：

我在 CSS 中使用了以下渐变背景：

body {
    margin:0px;
    padding:0px;
    border:0px;
    font-family: Helvetica, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: white;
    height:100%;
    width:100%;
    background: #f89623; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#150d03, endColorstr=#f89623); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#150d03), to(#f89623)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #150d03,  #f89623); /* for firefox 3.6+ */
}

它在桌面计算机上的 IE、FF Chrome 等中运行良好，但在移动设备上查看时渐变停止。

网址是：http://byoma.org/

任何建议将不胜感激。谢谢。

【问题讨论】：

您在移动设备上使用什么浏览器？

标签： background linear-gradients css

【解决方案1】：

首先，检查一下浏览器的兼容性：

但无论如何，你应该使用下面的例子：

.grad { 
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

文档：Mozilla doc

如果它不起作用，我会求助于这个网络应用程序：http://www.colorzilla.com/gradient-editor/

【讨论】：

感谢您，但它仍然无法在 Android 浏览器上运行。
我已经更新了我的答案，添加了一个指向我使用的 Web 应用程序的链接。
再次感谢，但不幸的是，这也不起作用。渐变仍然停止并以条形显示。
所以我不能再帮忙了。我也遇到了在 Android 浏览器上显示渐变的问题，并通过这个网站解决了这个问题。