Naprawiono problem z rozmiarem czcionki w mobilnym Safari (iPhone), w którym tekst jest renderowany niezgodnie, a niektóre czcionki są większe niż inne?

Nasza strona renderuje z niespójnymi rozmiarami czcionek w mobilnym Safari -- i o ile możemy powiedzieć, tylko mobilne Safari. To bardzo nas zaskoczyło.

Przeanalizowaliśmy witrynę za pomocą Firebug, a nieprawidłowe obszary dziedziczą właściwe style, ale czcionki nadal są renderowane z niewłaściwymi rozmiarami.

1) wizyta http://www.panabee.com .

2) przeprowadzić wyszukiwanie nazwy domeny.

Pola po lewej stronie pokazują nieprawidłowe rozmiary czcionek. Rozmiar czcionki powinien pasować do rozmiaru czcionki po prawej stronie (zarówno tytuły pudełek, jak i kopia pudełka). Na przykład tytuły "Wariacje" i "Twitter" są znacznie większe niż tytuł "alternatywne zakończenia"."

Jakieś wskazówki dlaczego?

Author: Brian Webster, 2011-03-14
Source

4 answers

Mobile Safari (jak Chrome dla Androida, Mobile Firefox i IE Mobile) zwiększa rozmiar czcionki szerokich bloków (przez cały czas), tak że jeśli dwukrotnie dotkniesz, aby powiększyć ten blok (który pasuje do szerokości ekranu), tekst będzie czytelny. Jeśli ustawisz -webkit-text-size-adjust: 100% (lub none), nie będzie w stanie tego zrobić, a więc gdy użytkownik dwukrotnie dotknie, aby powiększyć szerokie bloki, tekst będzie nieczytelnie mały; użytkownicy będą mogli go odczytać, jeśli przybliży, ale wtedy tekst będzie szerszy niż ekran i będą musieli przesuwać się poziomo, aby przeczytać każdą linię tekstu!

  1. Najlepiej byłoby to naprawić za pomocą technik Responsive Web Design , aby dostosować projekt do rozmiarów ekranu mobilnego (w takim przypadku nie byłoby już żadnych bardzo szerokich bloków, więc przeglądarki mobilne nie będą już dostosowywać rozmiarów czcionek).

  2. Jeśli nie jest to opcja, a Ty utknąłeś obsługując witrynę komputerową użytkownikom mobilnym, sprawdź, czy możesz dostosować swój projekt tak, aby żaden 320px dla wielu telefonów portretowych) (możesz użyć css specyficznego dla urządzeń mobilnych, aby uniknąć wpływu na przeglądarki desktopowe), A mobilne Safari nie będzie musiało zwiększać żadnych rozmiarów czcionek (a przeglądarki, które zmieniają tekst, takie jak przeglądarka Android i Opera Mobile, również nie będą musiały zmieniać układu).

  3. Wreszcie, jeśli naprawdę musisz uniemożliwić mobilnemu Safari dostosowanie rozmiarów czcionek, możesz ustawić -webkit-text-size-adjust: 100%, ale to tylko w ostateczności , ponieważ może to spowodować, że użytkownicy mobilni będą mieli trudności z czytaniem Twojego tekstu, ponieważ będzie on albo zbyt mały, albo będą musieli przesuwać się z boku na bok po każdej linii, którą przeczytają. Należy pamiętać, że należy używać 100% nie none, ponieważ żaden nie ma nieprzyjemnych skutków ubocznych w przeglądarkach desktopowych . Istnieją również równoważne właściwości -moz-text-size-adjust i -ms-text-size-adjust dla mobilnego Firefoksa i IE Mobile.

Edit: np. w Twoim przypadku najprostszym jest chyba 2nd alternatywa, więc możesz spróbować dodać następujący CSS: 

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

Chociaż nie jest to idealne do twardego kodowania 320px w ten sposób; można poprawić to za pomocą różnych zapytań CSS media, lub uzyskanie szerokości Urządzenia z JavaScript.

 135
Author: John Mellor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-09 15:13:47

Oto, co ostatecznie zadziałało (testowane tylko na iPhone 4 tho): 

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}
Przyznaliśmy odpowiedź Johnowi, ponieważ jego rozwiązanie było podstawą tego. Prawdopodobnie nie jest to najbardziej elegancka odpowiedź, ale działa.
 36
Author: Crashalot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-03 19:22:43

-webkit-text-size-adjust: none; spowoduje, że nie będziesz mógł powiększać urządzeń mobilnych. Zamiast tego powinieneś użyć 100%.

 5
Author: Webreality,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-12 21:49:10 
-webkit-text-size-adjust:none;
Prawdopodobnie rozwiąże twój problem. 
target-element { -webkit-text-size-adjust:80% }

Nadal będzie powiększać, ale będzie o 80% mniejszy niż domyślny webkits.

 3
Author: Thomas Maas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-28 01:44:46