2015-06-11 19 views
5

Bir sonraki uygulamamı oluşturmak için iyonik framework kullanıyorum. Ben bir arka plan svg görüntü için body, masaüstü tarayıcılarda (firefox & krom) mükemmel, benim nexus 4 arka plan görüntüsü mükemmel, ama arkadaşlarım aygıt yani Xiaomi Redmi, arka plan görüntü pozisyonunda çalıştığında ayarlamak için çalışıyorum uygun değil, üst ve alttan bazı boşluk gösterir. Xiaomi aitCordova css özellikleri tüm cihazlarda aynı değil çalışmıyor

enter image description here

Ekran Görüntüsü:

enter image description here

o arkaplan pozisyon başından başlayarak değildir görebileceğiniz gibi burada

nexus ekran görüntüsüdür. Başka bir cihazda .i.e Alcatel'i işaretlediğimde, boşluk hala geçerli ancak bu sefer daha büyük. Motorola g ve samsung galaxy S5'de görüntü mükemmel. İşte
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; 
} 

olduğu Wayferer bahseder gibi, bu iki Android sürümleri arasındaki render bir fark (büyük olasılıkla

<?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> 
+0

Her iki telefon da Android'in aynı sürümünü kullanıyor mu? Farklı sürümlerin farklı WebKit tarayıcılarına sahip olması nedeniyle soruyorum. – Wayferer

+0

evet, nexus, motog, samsung & alcatel ve Xiaomi'deki KitKat'taki lolipopu. Ama eğer webview rendering motoru tehlikeli bir problem çıkarsa o zaman Cordova'yı kullanmak için işe yaramaz mıdır? –

+1

Bunun yararsız olduğunu düşünmüyorum, bir web sitesi oluşturmak ve farklı tarayıcıları desteklemek zorunda kalmak istiyorum. Webkit sürümlerini öğrenirim ve çalışmayan birinin etrafında bir iş olup olmadığını görürdüm. Uygulama boyutu sizin için bir sorun değilse, [Crosswalk] 'a bakabilirsiniz (https://crosswalk-project.org/) – Wayferer

cevap

1

benim SVG dosyası:

Bu

body uygulanan CSS kodudur KitKat ve Lollipop).
  1. Crosswalk plugin kullanarak tüm Android kurulumlar aynı tarayıcı sürümünü ver:

    sorunu gidermek için birkaç yolu vardır. Crosswalk, tüm Android v.> 4.0 cihazlarının aynı şeyi görebilmesi için WebView'i en yeni Chromium tarayıcısıyla değiştirir.

    • Sen henüz inşa (eninde sonunda, destek planı yapmak)
    • indir PhoneGap üzerine inşa etmek mümkün olmayacaktır < 4,0
    • Android desteklemek için mümkün olmayacaktır: olumsuzlukları o vardır uygulamanız için boyut olup olmadığını görmek dolayı Bunun yerine farkını izini ve Yaya geçidinde olmadan çözmek ediyorsanız, caniuse.com bakmak olabilir
  2. gömülü tarayıcısı (http://caniuse.com/#feat=svg-css) için, büyür HTML/CSS cl ile ilgili herhangi bir sorun kullanıyorsun. Ayrıca, sorunun nedenleri neler olduğunu görmek için eski aygıta uzaktan hata ayıklamayı da deneyebilirsiniz (yönergeler: https://developer.chrome.com/devtools/docs/remote-debugging).

İlgili konular