Podwójny rozmiar czcionki nie ma podwójnej szerokości na urządzeniu mobilnym? Pulpit ok.

Question

Mam dziwny problem z Androidem Chrome, zarówno mobilnym, jak i tabletem.

Próbuję wypełnić szerokość kontenera tekstem (rozmiar czcionki).

Kiedy ustawiam podwójny rozmiar czcionki dla elementu, spodziewałem się, że będzie również podwójna szerokość. Działa prawie znakomicie na komputerach, ale na urządzeniach mobilnych nie jest, szerokość jest trochę większa niż 2x.

ChildFontSize = "actual child font-size" * "container width"/"child width" 

Wynik:

Na pulpicie 2 * "font-size" = 2 * "width" < - OK

Na mobile 2 * "font-size" ~= 2.2 * "width" < - Nie, to nie tak ... 2.2

Dokładnie:

1. Sprawdź szerokość pojemnika, np. 300px
2. Pętla dzieci w pojemniku, o rozpiętości 6x
3. Sprawdź rzeczywistą szerokość dziecka, np. 150px
4. Podziel "container width"/"child width", ex. wynik to 2
5. Sprawdź rzeczywisty rozmiar czcionki dla dziecka, np. 30px
6. Mnożenie "child font-size" * "result of divide", ex. Rezultatem jest 60px

żywo przykład:

Freelance PHP Web Developer Tomas.cc | PHP5, SQL, jQuery, CSS3, HTML5

Pełny kod:

var actual; 
var newsize; 
var multi; 
var bigwidth = document.getElementById("big-wrap").offsetWidth; 
var bigs = document.getElementsByClassName("big"); 
for (i = 0; i < bigs.length; i++) { 
    actual = parseFloat(window.getComputedStyle(bigs[i], null).getPropertyValue('font-size')).toFixed(1); 
    multi = (bigwidth/bigs[i].offsetWidth); 
    newsize = parseFloat(actual * multi).toFixed(1); 
    bigs[i].style.fontSize = newsize + "px"; 
} 

Przedstawiane:

To jest Desktop Chrome, prawie idealny.

To Android Chrome, nie dobre ...

Dzięki bardzo za pomoc :) Próbując rozwiązać go około 3 godzin już:/

Answer 1

I don” t myślisz, że potrzebujesz szerokości do # big-wrap (kontener tekstowy). Chcesz, aby tekst był pośrodku zarówno w poziomie, jak i w pionie.

co możesz zrobić.

#big-wrap{ 
    width:auto; 
} 

usunąć całą szerokość z zapytań o media lub zrobić to automatycznie.następnie

#big-wrap span{ 
    display:block; 
} 

cały tekst w zakresie z podziałem na nowy wiersz.

Answer 2

Spróbuj wyrazić wszystko w jednostce em