Cordova css属性在所有设备中都不起作用

概述我正在使用离子框架来构建我的下一个应用程序.我正在尝试将背景svg图像设置为正文,在桌面浏览器(firefox& chrome)中它是完美的,在我的nexus 4上背景图像是完美的,但当我尝试在我的朋友设备即小米Redmi时,背景图像位置不合适,从顶部和底部显示出一些差距. 这是nexus的截图： xiaomi的屏幕截图： 正如您所看到的,背景位置不是从顶部开始. 当我检查另一台设备时.阿尔卡特, 我正在使用离子框架来构建我的下一个应用程序.我正在尝试将背景svg图像设置为正文,在桌面浏览器(firefox& Chrome)中它是完美的,在我的nexus 4上背景图像是完美的,但当我尝试在我的朋友设备即小米Redmi时,背景图像位置不合适,从顶部和底部显示出一些差距.

这是nexus的截图：

xiaomi的屏幕截图：

正如您所看到的,背景位置不是从顶部开始.
当我检查另一台设备时.阿尔卡特,差距仍然存在,但这次它更大了.在motorola g和三星galaxy S5,形象是完美的.

这是应用于body的CSS代码：

body {    background-image: url("../img/bg.svg") !important;    background-repeat:no-repeat !important;    background-position:0 0 !important;    height:100vh !important;    wIDth:100% !important;    background-size:100% 100% !important;    padding:0 !important;    margin:0 !important;    position:relative !important;    background-attachment:fixed !important;}

这是我的SVG文件

<?xml version="1.0" enCoding="UTF-8"?><!DOCTYPE svg PUBliC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><!-- Creator: CorelDRAW X6 --><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" wIDth="1.06666in" height="1.6in" version="1.0" vIEwBox="0 0 1067 1600" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs>  <style type="text/CSS">   <![cdaTA[    .fil13 {fill:none}    .fil10 {fill:#3C8071}    .fil9 {fill:#44693E}    .fil5 {fill:#4F7544}    .fil4 {fill:#659676}    .fil3 {fill:#738962}    .fil1 {fill:#87A790}    .fil6 {fill:#B2922F}    .fil7 {fill:#B47D2A}    .fil8 {fill:#B8A636}    .fil2 {fill:#E6E9D4}    .fil12 {fill:#F5F2D3}    .fil11 {fill:#F6F1D4}    .fil14 {fill:#373435;fill-opacity:0.149020}    .fil0 {fill:url(#ID1)}   ]]>  </style>   <clipPath ID="ID0">    <path d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/>   </clipPath>  <linearGradIEnt ID="ID1" gradIEntUnits="userSpaceOnUse" x1="533.331" y1="237.996" x2="533.331" y2="1360.45">   <stop offset="0" />   <stop offset="0.721569" />   <stop offset="1" />  </linearGradIEnt> </defs> <g ID="Layer_x0020_1">  <Metadata ID="CorelCorpID_0Corel-Layer"/>  <g>  </g>  <g >   <g>    <rect  x="-74" y="-3" wIDth="1214" height="1604"/>    <path  d="M-74 1473l0 -315c88,65 158,315 158,315l-158 0z"/>    <path  d="M-74 1233l0 -74c19,14 37,36 53,62 -1,1 -2,1 -3,1 -6,-2 -39,-16 -39,-16l-1 34 -9 -6z"/>    <path  d="M1140 1170l0 290 -179 0c0,0 90,-271 179,-290z"/>    <path  d="M384 1458c0,0 254,-474 335,-476 80,-3 329,464 329,464l-664 12z"/>    <path  d="M52 1457c0,0 123,-296 240,-292 117,5 218,292 218,292l-458 0z"/>    <path  d="M267 1451c0,0 98,-296 191,-292 93,5 173,292 173,292l-364 0z"/>    <path  d="M1109 1350c0,13 2,22 7,27 0,0 -5,0 -8,-2 2,8 5,15 9,20 0,0 -6,-1 -9,-2 3,7 6,13 10,18 -11,0 -21,0 -32,0 5,-4 10,-10 14,-18 -3,1 -9,1 4,-4 9,-10 13,-20 -3,2 -7,3 -8,3 6,-4 11,-13 14,-29z"/>    <path  d="M423 1474c-67,-24 -140,-49 -222,-56 -126,-11 -201,34 -274,10l0 18 0 155 1214 0 0 -118 0 -43 0 -26c-169,-57 -281,3 -368,55 -44,26 -82,50 -118,56 -69,10 -145,-20 -232,-51z"/>    <path  d="M888 1414c-79,0 -139,17 -183,26 -24,5 -43,8 -57,4 -19,-5 -46,-12 -81,-18 -73,-12 -175,-20 -280,8 46,11 88,26 129,41 90,32 169,64 241,53 37,-5 77,-31 123,-58 32,-19 68,-40 108,-55z"/>    <path  d="M439 1380c1,20 5,35 15,44 0,0 -9,-1 -15,-4 5,25 18,32 0,0 -11,-2 -16,-3 6,12 12,21 20,29 -20,0 -40,0 -60,0 9,-6 17,-17 24,-29 -6,1 -16,2 -16,2 8,-7 15,-16 22,-31 -6,4 -14,6 -15,5 10,-7 19,-21 23,-46z"/>    <path  d="M196 1378c1,28 5,47 15,60 0,-5 5,18 10,34 18,-4 6,16 12,30 20,40 -20,-8 17,-23 24,-40 -6,3 -16,3 8,-10 15,-22 22,-43 -6,5 -14,8 -15,7 10,-9 19,-29 23,-63z"/>    <path  d="M1066 1377c2,21 6,39 16,48 0,-4 -11,-7 1,14 6,40 13,-4 -13,-8 1,19 9,29 17,36 -22,8 -39,10 -58,3 9,-27 18,-39 -6,9 -16,9 8,-7 21,-34 29,-50 -6,6 -16,6 11,-7 18,-18 22,-46z"/>    <path  d="M579 1320c3,27 10,47 25,59 0,0 -13,-1 -21,-5 8,18 16,34 27,0 -15,-2 -22,16 19,29 30,40 -27,0 -54,0 -81,0 11,-8 22,-22 30,-39 -7,2 -22,3 -22,3 10,-22 27,-42 -8,5 -18,7 -20,7 13,-9 23,-28 27,-62z"/>    <path  d="M906 1408c4,21 8,39 19,-4 -12,-7 2,14 8,40 17,-4 -14,-8 2,19 11,29 19,7 -38,9 -57,-6 15,-26 15,-38 -6,1 -15,8 7,-33 25,-49 -6,4 -13,-7 16,-18 18,-45z"/>    <path  d="M423 1475c-68,33 -129,68 -194,58 -104,-15 -148,-108 -302,-86l0 155 1214 0 0 -118 0 -43c-15,5 -29,13 -44,23 -42,28 -87,66 -168,58 -66,-6 -109,-30 -156,-52 -22,-10 -45,-20 -72,-28 -21,-6 -44,-11 -70,-14 -22,-2 -42,-2 -62,6 -101,26 -145,47z"/>    <path  d="M501 1403c4,35 13,61 33,76 0,0 -16,-1 -27,-6 11,23 21,43 35,57 0,0 -19,-3 -29,-5 12,21 24,38 39,51 -35,0 -70,0 -105,0 14,-11 28,-29 38,-51 -10,3 -28,4 -28,4 13,-12 25,-28 35,-55 -10,6 -23,10 -26,9 17,-12 30,-37 35,-80z"/>    <path  d="M1007 1408c0,31 3,58 17,73 0,-7 -16,-12 0,20 10,57 20,69 0,-7 -18,-14 -1,28 9,43 20,56 -34,8 -59,8 -86,-4 14,-8 29,-37 31,-55 -9,1 -25,11 -25,11 13,-9 29,-44 43,-66 -9,5 -21,7 -24,6 17,-24 38,-64z"/>    <path  d="M943 1320c4,22 9,42 21,51 0,-5 -13,43 18,-4 -15,-9 2,20 11,31 21,39 -23,8 -41,9 -62,2 9,-28 16,-41 -6,-8 20,-36 27,-52 -6,-7 17,-19 20,-48z"/>    <path  d="M1038 1331c1,14 4,27 11,33 0,0 -4,-3 -8,-5 1,9 4,-3 -9,-6 1,13 6,20 12,25 -15,5 -27,7 -40,2 6,-4 12,-19 12,-27 -4,1 -11,6 -11,6 6,-5 15,-24 20,-34 -4,3 -10,4 -11,4 7,-13 15,-32z"/>    <path  d="M868 1352c2,17 5,33 14,41 0,-4 -9,11 5,34 12,40 0,0 -7,16 8,24 14,31 -18,5 -32,6 -48,-1 7,-5 14,-21 14,-31 -5,1 -13,6 -13,6 7,-27 23,-40 -5,3 -11,4 9,-14 17,-37z"/>    <path  d="M769 1340c3,17 7,32 16,-4 -10,-6 2,11 7,-3 -11,16 9,24 16,30 -18,6 -32,7 -48,2 7,-5 13,-22 12,-32 -5,7 -13,-6 16,-28 21,-41 -5,5 -13,5 9,-6 14,-15 15,-38z"/>    <path  d="M671 1330c-2,21 -5,39 -15,-7 -1,14 -5,40 -12,0 8,-4 13,-8 0,19 -8,29 -16,37 22,8 40,9 58,2 -9,-6 -18,-27 -18,-39 6,1 16,9 16,9 -8,-7 -22,-34 -30,-49 6,4 14,6 16,5 -11,-18 -23,-45z"/>    <path  d="M348 1377c2,33 10,57 27,72 0,-1 -25,-6 9,22 17,41 31,53 0,0 -18,-2 -27,-5 10,20 21,35 35,48 -33,0 -66,0 -99,-10 28,-27 38,-48 -9,2 -26,3 -26,3 12,-11 24,-26 35,-51 -9,6 -22,9 -25,-11 30,-35 36,-75z"/>    <path  d="M310 1364c1,26 5,45 15,-1 -14,17 9,32 17,42 0,0 -10,16 11,28 19,38 -19,0 -38,0 -57,-22 23,-38 -5,2 -15,3 -15,3 7,-9 14,-21 21,7 -15,-9 18,-27 22,-60z"/>    <path  d="M242 1367c0,20 4,-1 -13,-4 4,13 8,25 15,-2 -14,-3 5,12 10,21 17,29 -17,0 -34,0 -51,0 7,-17 21,-29 -5,1 -14,2 -14,-7 13,-16 19,4 -12,-21 20,-46z"/>    <path  d="M156 1357c0,14 3,24 9,30 0,9 6,17 10,22 0,-1 -10,-2 4,15 12,20 -12,0 -23,0 -35,-11 14,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-14 14,-31z"/>    <path  d="M403 1358c0,-31z"/>    <path  d="M491 1357c-1,14 1,24 7,9 5,8 6,15 11,-11 15,1 -10,-21 -4,-14 16,-31z"/>    <path  d="M18 1367c0,14 2,17 8,-1 -8,15 10,20 -10,0 -29,0 4,-4 8,-11 12,1 -8,-5 7,-11 11,2 -6,4 -7,4 5,-14 11,-31z"/>    <path  d="M108 1391c0,-31z"/>    <path  d="M877 1057c26,-15 51,-22 75,-3 15,-40 36,-46 59,-46 -27,-2 -53,-2 -63,31 -26,-15 -49,-2 -71,18z"/>    <path  d="M1022 967c7,-3 14,-4 20,2 5,-10 11,-11 17,-10 -7,-2 -18,6 -6,-2 -20,2z"/>    <path  d="M322 927c-48,-6 -92,31 -92,80 137,0 274,0 412,-1 8,-40 -37,-69 -70,-47 -14,-34 -52,-51 -87,-40 -16,-27 -46,-45 -80,-45 -36,0 -68,21 -83,51z"/>    <path  d="M-23 1093c-4,0 -25,25 0,4 1,7 2,10l29 0 18 0 6 0 22 0 53 0 25 0 74 0 19 0 32 0 15 0 33 0 12 0 37 0c1,-2 1,-4 1,-6 0,-14 -11,-25 -25,-25 -2,1 -4,-17 -19,-30 -37,-30 -11,0 -20,4 -27,12 -6,-6 -21,-6 -6,0 -12,2 -17,-20 -32,-34 -56,-34 -23,0 -44,13 -55,32 -8,-9 -29,-9 -19,0 -36,11 -45,27 -2,-1 -4,-1 -6,5z"/>    <path  d="M857 1099c5,2 12,6 3,-4 7,-6 12,-6l2 0c6,-9 16,-15 27,-15 14,0 25,8 30,20 1,0 3,-1 5,-1 4,1 11,4 3,-7 14,-7 10,0 17,8 17,17 0,2 0,4 -1,6l-22 0 -10 0 -12 0 -16 0 -32 0 -14 0 -8 0 -2 0 -7 0 -20 0c-1,-2 -2,-5 -2,-7 0,-5 3,-10 6,-13 3,-2 6,-3 10,-3z"/>    <path  d="M74 1349c-3,36 2,71 -16,87 0,0 12,-5 18,-13 -1,24 -8,60 -21,74 0,-10 16,-18 1,34 -14,46 -30,56 39,13 65,12 97,-11 -38,-44 -40,-65 10,3 25,12 25,12 -14,-12 -27,-37 -40,-64 11,6 19,9 23,9 -19,-12 -25,-31 -33,-77z"/>    <path  d="M617 1078l56 -25 -10 74 52 -74 42 69 4 -66c0,0 29,35 34,40 5,5 16,-34 16,-34 -38,-49 -72,-82 -93,-81 -23,1 -61,41 -103,97z"/>    <path  d="M527 1211c-21,-30 -45,-50 -69,-51 -27,-1 -54,22 -79,57 -8,10 -15,22 -22,34l37 -16 16 -7 -3 24 -6 49 20 -29 32 -45 33 54 10 16 2 -35 2 -31c0,12 9,11 21,25 25,29 4,4 11,-16 14,-27 -7,-11 -13,-22 -20,-32z"/>    <path  d="M373 1210c-25,-26 -53,-44 -81,-1 -73,26 -107,65l52 -17 -6 38 48 -42 46 30 1 -34c0,0 31,14 36,16 3,1 8,-5 11,-11z"/>    <path  d="M55 1162c11,-10 22,-17 37,-11 2,-21 12,-30 -14,6 -27,23 -15,-4 -24,5 -33,17z"/>    <path  d="M1140 1170l0 63 -38 31 6 -38 -44 14c24,-36 50,-63 76,-69z"/>    <path  d="M1140 1378l0 122c-16,3 -30,2 -45,-6 20,1 -17,9 -17,9 9,-7 24,-35 33,-52 -7,4 -15,6 -17,5 12,-7 20,-19 25,-48 0,3 0,6 1,8z"/>    <path  d="M-74 1497l0 -80c5,34 17,40l-21 0zm0 -80l0 -42c2,37 15,47 0,-5z"/>    <path  d="M811 1361c3,36 8,67 26,83 0,-7 -19,-13 1,24 8,69 21,0 -14,-14 1,49 28,63 -39,13 -68,15 -100,4 15,-46 32,-66 -10,15 -28,15 14,-12 38,-58 51,-85 -11,6 -24,10 -27,9 19,-12 31,-31 39,-78z"/>   </g>  </g>  <path  d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/>  <path  d="M852 697l5 29 28 17 -26 14 -7 32 -21 -21 -33 3 13 -27 -13 -30 29 4 25 -22z"/>  <path  d="M201 676l-2 13 -13 7 12 6 3 14 10 -9 15 1 -6 -12 6 -13 -13 2 -11 -10z"/>  <path  d="M661 585l3 18 17 10 -16 9 -4 20 -13 -13 -20 2 8 -16 -8 -19 18 3 15 -13z"/>  <path  d="M167 841l-5 29 -28 17 26 14 7 32 21 -21 33 3 -13 -27 13 -30 -29 4 -25 -22z"/>  <path  d="M209 600l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/>  <path  d="M108 696l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/>  <path  d="M785 559l2 13 13 7 -12 6 -3 14 -10 -9 -15 1 6 -12 -6 -13 13 2 11 -10z"/>  <path  d="M404 1515c70,0 127,8 127,19 0,10 -57,19 -127,19 -70,0 -127,-8 -127,-19 0,-10 57,-19 127,-19z"/> </g></svg>

解决方法 正如Wayferer所提到的,这很可能是两个AndroID版本(KitKat和Lollipop)之间渲染的差异.

有几种方法可以解决这个问题：

>使用Crosswalk plugin为您的所有AndroID安装提供相同的浏览器版本.Crosswalk使用最新的Chromium浏览器交换WebVIEw,以便所有AndroID v.> 4.0设备会看到同样的事情.缺点是：

>您将无法支持AndroID< 4
>您将无法构建PhoneGap构建(他们最终计划支持)
>由于嵌入式浏览器,您的应用程序的下载大小变得更大

>如果你想在没有Crosswalk的情况下追踪差异并解决它,你可以看看caniuse.com(http://caniuse.com/#feat=svg-css),看看你正在使用的HTML / CSS类是否有任何明显的问题.您还可以尝试远程调试旧设备(说明：https://developer.chrome.com/devtools/docs/remote-debugging),以查看导致问题的元素.

总结

以上是内存溢出为你收集整理的Cordova css属性在所有设备中都不起作用全部内容，希望文章能够帮你解决Cordova css属性在所有设备中都不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。