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

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/