1. Dom
  2. Pytanie i odpowiedź
  3. Właściwości css Cordova nie działają tak samo we wszystkich urządzeniach

Właściwości css Cordova nie działają tak samo we wszystkich urządzeniach

2015-06-11 11 views
5

Używam jonowego frameworka do zbudowania mojej następnej aplikacji. Próbuję ustawić obraz svg w tle na body, w przeglądarkach komputerowych (firefox & chrome) jest idealny, na moim nexusie 4 obraz tła jest idealny, ale kiedy spróbowałem w moim urządzeniu znajomych tj. Xiaomi Redmi, pozycja obrazu tła nie jest właściwe, pokazuje trochę luki od góry i od dołu.Właściwości css Cordova nie działają tak samo we wszystkich urządzeniach

Oto zrzut ekranu nexus:

enter image description here

Zrzut ekranu Xiaomi:

enter image description here

Jak widać, że pozycja tła nie jest zaczynając od góry. Po sprawdzeniu innego urządzenia .i.e Alcatel, luka nadal pozostaje, ale tym razem jest większa. W motoroli i Samsung Galaxy S5 obraz jest doskonały.

Jest to kod CSS stosowane do body:

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; 
}

Oto mój plik 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" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
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" style="stop-color:#86CACB"/> 
    <stop offset="0.721569" style="stop-color:#BDDFDB"/> 
    <stop offset="1" style="stop-color:#F5F5EC"/> 
    </linearGradient> 
</defs> 
<g id="Layer_x0020_1"> 
    <metadata id="CorelCorpID_0Corel-Layer"/> 
    <g> 
    </g> 
    <g style="clip-path:url(#id0)"> 
    <g> 
    <rect class="fil0" x="-74" y="-3" width="1214" height="1604"/> 
    <path class="fil1" d="M-74 1473l0 -315c88,65 158,315 158,315l-158 0z"/> 
    <path class="fil2" 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 class="fil1" d="M1140 1170l0 290 -179 0c0,0 90,-271 179,-290z"/> 
    <path class="fil3" d="M384 1458c0,0 254,-474 335,-476 80,-3 329,464 329,464l-664 12z"/> 
    <path class="fil4" d="M52 1457c0,0 123,-296 240,-292 117,5 218,292 218,292l-458 0z"/> 
    <path class="fil1" d="M267 1451c0,0 98,-296 191,-292 93,5 173,292 173,292l-364 0z"/> 
    <path class="fil5" 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 -9,1 4,-4 9,-10 13,-20 -3,2 -7,3 -8,3 6,-4 11,-13 14,-29z"/> 
    <path class="fil6" 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 class="fil7" 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 class="fil5" d="M439 1380c1,20 5,35 15,44 0,0 -9,-1 -15,-4 5,13 10,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 class="fil5" d="M196 1378c1,28 5,47 15,60 0,0 -9,-1 -15,-5 5,18 10,34 18,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40 -20,0 -40,0 -60,0 9,-8 17,-23 24,-40 -6,2 -16,3 -16,3 8,-10 15,-22 22,-43 -6,5 -14,8 -15,7 10,-9 19,-29 23,-63z"/> 
    <path class="fil5" d="M1066 1377c2,21 6,39 16,48 0,0 -6,-4 -11,-7 1,14 6,40 13,48 0,0 -8,-4 -13,-8 1,19 9,29 17,36 -22,8 -39,10 -58,3 9,-6 17,-27 18,-39 -6,2 -16,9 -16,9 8,-7 21,-34 29,-50 -6,4 -14,6 -16,6 11,-7 18,-18 22,-46z"/> 
    <path class="fil5" d="M579 1320c3,27 10,47 25,59 0,0 -13,-1 -21,-5 8,18 16,34 27,44 0,0 -15,-2 -22,-4 9,16 19,29 30,40 -27,0 -54,0 -81,0 11,-8 22,-22 30,-39 -7,2 -22,3 -22,3 10,-9 19,-22 27,-42 -8,5 -18,7 -20,7 13,-9 23,-28 27,-62z"/> 
    <path class="fil5" d="M906 1408c4,21 8,39 19,48 0,0 -6,-4 -12,-7 2,14 8,40 17,48 0,0 -8,-4 -14,-8 2,19 11,29 19,36 -22,7 -38,9 -57,2 8,-6 15,-26 15,-38 -6,1 -15,8 -15,8 7,-7 19,-33 25,-49 -6,4 -13,6 -15,5 10,-7 16,-18 18,-45z"/> 
    <path class="fil8" 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,0 -54,6 -101,26 -145,47z"/> 
    <path class="fil9" 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 class="fil9" d="M1007 1408c0,31 3,58 17,73 0,0 -8,-7 -16,-12 0,20 10,57 20,69 0,0 -11,-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,-9 29,-24 38,-64z"/> 
    <path class="fil5" d="M943 1320c4,22 9,42 21,51 0,0 -6,-5 -13,-8 2,15 9,43 18,51 0,0 -9,-4 -15,-9 2,20 11,31 21,39 -23,8 -41,9 -62,2 9,-7 16,-28 16,-41 -6,2 -16,9 -16,9 8,-8 20,-36 27,-52 -6,4 -14,6 -16,6 11,-7 17,-19 20,-48z"/> 
    <path class="fil5" d="M1038 1331c1,14 4,27 11,33 0,0 -4,-3 -8,-5 1,9 4,28 9,33 0,0 -6,-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,-5 12,-13 15,-32z"/> 
    <path class="fil5" d="M868 1352c2,17 5,33 14,41 0,0 -5,-4 -9,-7 1,11 5,34 12,40 0,0 -7,-4 -11,-8 1,16 8,24 14,31 -18,5 -32,6 -48,-1 7,-5 14,-21 14,-31 -5,1 -13,6 -13,6 7,-6 17,-27 23,-40 -5,3 -11,4 -13,4 9,-5 14,-14 17,-37z"/> 
    <path class="fil5" d="M769 1340c3,17 7,32 16,40 0,0 -5,-4 -10,-6 2,11 7,33 14,40 0,0 -7,-3 -11,-7 2,16 9,24 16,30 -18,6 -32,7 -48,2 7,-5 13,-22 12,-32 -5,1 -13,7 -13,7 6,-6 16,-28 21,-41 -5,3 -11,5 -13,5 9,-6 14,-15 15,-38z"/> 
    <path class="fil5" d="M671 1330c-2,21 -5,39 -15,48 0,0 5,-4 11,-7 -1,14 -5,40 -12,48 0,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,-7 -18,-18 -23,-45z"/> 
    <path class="fil5" d="M348 1377c2,33 10,57 27,72 0,0 -15,-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,0 14,-10 28,-27 38,-48 -9,2 -26,3 -26,3 12,-11 24,-26 35,-51 -9,6 -22,9 -25,9 17,-11 30,-35 36,-75z"/> 
    <path class="fil5" d="M310 1364c1,26 5,45 15,57 0,0 -9,-1 -14,-5 5,17 9,32 17,42 0,0 -10,-2 -16,-4 6,16 11,28 19,38 -19,0 -38,0 -57,0 8,-8 17,-22 23,-38 -5,2 -15,3 -15,3 7,-9 14,-21 21,-41 -6,5 -13,7 -15,7 10,-9 18,-27 22,-60z"/> 
    <path class="fil5" d="M242 1367c0,20 4,35 13,44 0,0 -8,-1 -13,-4 4,13 8,25 15,32 0,0 -9,-2 -14,-3 5,12 10,21 17,29 -17,0 -34,0 -51,0 7,-6 15,-17 21,-29 -5,1 -14,2 -14,2 7,-7 13,-16 19,-31 -5,4 -12,6 -13,5 9,-7 16,-21 20,-46z"/> 
    <path class="fil5" d="M156 1357c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/> 
    <path class="fil5" d="M403 1358c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/> 
    <path class="fil5" d="M491 1357c-1,14 1,24 7,30 0,0 -5,0 -9,-2 2,9 5,17 9,22 0,0 -6,-1 -9,-2 3,8 6,15 11,20 -12,0 -23,0 -35,0 5,-4 11,-11 15,-20 -3,1 -10,1 -10,1 5,-5 10,-11 14,-21 -4,2 -8,4 -9,4 6,-4 12,-14 16,-31z"/> 
    <path class="fil5" d="M18 1367c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/> 
    <path class="fil5" d="M108 1391c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/> 
    <path class="fil10" 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 class="fil10" d="M1022 967c7,-3 14,-4 20,2 5,-10 11,-11 17,-10 -7,-2 -14,-2 -18,6 -6,-5 -13,-2 -20,2z"/> 
    <path class="fil11" 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 class="fil11" d="M-23 1093c-4,-3 -9,-4 -14,-4 -14,0 -25,11 -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,0 -4,0 -6,1 -4,-17 -19,-30 -37,-30 -11,0 -20,4 -27,12 -6,-4 -13,-6 -21,-6 -6,0 -12,2 -17,4 -11,-20 -32,-34 -56,-34 -23,0 -44,13 -55,32 -8,-6 -18,-9 -29,-9 -19,0 -36,11 -45,27 -2,-1 -4,-1 -6,-1 -6,0 -11,2 -15,5z"/> 
    <path class="fil12" d="M857 1099c5,0 9,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,0 8,1 11,4 3,-4 8,-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 class="fil9" d="M74 1349c-3,36 2,71 -16,87 0,0 12,-5 18,-13 -1,24 -8,60 -21,74 0,0 8,-10 16,-18 1,34 -14,46 -30,56 39,13 65,12 97,1 -15,-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 class="fil2" 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 class="fil2" 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,0 4,5 10,12 9,11 21,25 25,29 4,4 11,-16 14,-27 -7,-11 -13,-22 -20,-32z"/> 
    <path class="fil2" d="M373 1210c-25,-26 -53,-44 -81,-45 -36,-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 class="fil10" d="M55 1162c11,-10 22,-17 37,-11 2,-21 12,-27 23,-30 -14,2 -26,6 -27,23 -15,-4 -24,5 -33,17z"/> 
    <path class="fil2" d="M1140 1170l0 63 -38 31 6 -38 -44 14c24,-36 50,-63 76,-69z"/> 
    <path class="fil5" d="M1140 1378l0 122c-16,3 -30,2 -45,-4 10,-6 20,-28 21,-41 -6,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 class="fil5" d="M-74 1497l0 -80c5,18 10,34 17,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40l-21 0zm0 -80l0 -42c2,21 6,37 15,47 0,0 -9,-1 -15,-5z"/> 
    <path class="fil9" d="M811 1361c3,36 8,67 26,83 0,0 -9,-7 -19,-13 1,24 8,69 21,83 0,0 -14,-7 -22,-14 1,33 14,49 28,63 -39,13 -68,15 -100,4 15,-11 30,-46 32,-66 -10,3 -28,15 -28,15 14,-12 38,-58 51,-85 -11,6 -24,10 -27,9 19,-12 31,-31 39,-78z"/> 
    </g> 
    </g> 
    <path class="fil13" d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/> 
    <path class="fil11" d="M852 697l5 29 28 17 -26 14 -7 32 -21 -21 -33 3 13 -27 -13 -30 29 4 25 -22z"/> 
    <path class="fil11" d="M201 676l-2 13 -13 7 12 6 3 14 10 -9 15 1 -6 -12 6 -13 -13 2 -11 -10z"/> 
    <path class="fil11" d="M661 585l3 18 17 10 -16 9 -4 20 -13 -13 -20 2 8 -16 -8 -19 18 3 15 -13z"/> 
    <path class="fil11" d="M167 841l-5 29 -28 17 26 14 7 32 21 -21 33 3 -13 -27 13 -30 -29 4 -25 -22z"/> 
    <path class="fil11" d="M209 600l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/> 
    <path class="fil11" d="M108 696l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/> 
    <path class="fil11" d="M785 559l2 13 13 7 -12 6 -3 14 -10 -9 -15 1 6 -12 -6 -13 13 2 11 -10z"/> 
    <path class="fil14" 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>

Źródło

2015-06-11 Niraj Chauhan

+0

Czy na obu telefonach działa ta sama wersja Androida? Pytam, ponieważ różne wersje mają różne przeglądarki WebKit. – Wayferer

+0

tak, jego lizak w nexus, motog, samsung & alcatel i KitKat w Xiaomi. Ale jeśli silnik renderowania w przeglądarce internetowej jest poważny, to czy nie uważasz, że jego używanie w Cordova jest bezużyteczne? –

+1

Nie sądzę, że jest to bezużyteczne, podchodzę do tego jak budowanie strony internetowej i obsługa różnych przeglądarek. Chciałbym znaleźć wersje Webkit i zobaczyć, czy jest jakieś obejście dla tego, który nie działa. Jeśli rozmiar aplikacji nie jest dla Ciebie problemem, możesz zajrzeć do [Crosswalk] (https://crosswalk-project.org/) – Wayferer

Odpowiedz

1

Jak wspomina Wayferer, najprawdopodobniej jest to różnica w renderingu między tymi dwoma wersjami Androida (KitKat i Lollipop).

Istnieje kilka sposobów, w celu rozwiązania problemu:

  1. podać wszystkie Android instalacjach samą wersję przeglądarki, za pomocą Crosswalk plugin. Przejście dla pieszych zamienia widok WebView z najnowszą przeglądarką Chromium, aby wszystkie urządzenia z Androidem v.> 4.0 widziały to samo. Wady na to, że:

    • Nie będzie w stanie obsługiwać Android < 4,0
    • Nie będzie w stanie zbudować na PhoneGap zbudować jeszcze (robią plan wsparcia, ostatecznie)
    • Pobieranie rozmiar aplikacji staje się większy, dzięki wbudowanej przeglądarce

  2. Jeśli wolisz wyśledzić różnicę i rozwiązać go bez Crosswalk, można spojrzeć na caniuse.com (http://caniuse.com/#feat=svg-css), aby sprawdzić, czy istnieje każdy oczywisty problem z kodem HTML/CSS osły, których używasz. Możesz również spróbować zdalnego debugowania w starszym urządzeniu (instrukcje: https://developer.chrome.com/devtools/docs/remote-debugging), aby sprawdzić, jakie elementy powodują problem.

Źródło

2015-06-11 18:18:44 eb1

Powiązane problemy

 Powiązane problemy