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

Question

我在 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/

如有任何建议，我们将不胜感激。谢谢。

Answer 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

如果它不起作用，我会求助于此 Web 应用程序:http://www.colorzilla.com/gradient-editor/