Niespójne rozmiary czcionek na smartfonie

Question

Modyfikuję stronę tak, aby wyglądała dobrze na smartfonach. Deklarowałem sekcję @media w pliku CSS, dzięki czemu mogę określić rozmiary czcionek dla tej strony. Oto sekcja mediów:

@media screen and (max-device-width: 640px) { 
    #TermsOfUse { 
     padding: 0 2em 0 2em; 
     margin-left: auto; 
     margin-right: auto; 
     color: #777; 
     font: small sans-serif; 
    } 

    #TermsOfUse p { 
     color: #777; 
     font-weight: bold; 
     font: small sans-serif; 
     padding-top: 1em; 
     padding-bottom: 1em; 
    } 

    #TermsOfUse #trademark_footer p { 
     font: xx-large sans-serif; 
    } 
} 

Jednak rozmiary czcionek są wyświetlane niekonsekwentnie. Powiedziałem, żeby pokazać "małe" czcionki, ale jedna sekcja pokazuje czcionki w znacznie mniejszym rozmiarze (id = "trademark_footer" na dole). Używanie "xx-large" nie powoduje nawet, że czcionka jest tak duża, jak "mała" czcionka w pozostałej części strony. Przeglądam stronę w Chrome na Androida.

Ponadto, gdy wyświetlam tę stronę w poniższym symulatorze, wszystkie czcionki na całej stronie są małe - o wiele za małe, aby je przeczytać.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

Po pierwsze, dlaczego jest czcionka w znaku na dole strony wyświetlają się tak znacznie mniejsze niż czcionki na pozostałej części strony (Chrome na Androida)?

Po drugie, dlaczego wszystkie czcionki są tak małe w symulatorze iPhone'a?

Wszystko, co staram się osiągnąć, to pokazać wszystkie czcionki w czytelnym rozmiarze na wszystkich smartfonach.

UPDATE:

Kiedy określić rozmiary czcionek wyraźnie, mam ten sam problem. Jeśli określę 13px, na przykład, dla czcionki podstawowej, muszę podać coś około 30px na znaku towarowym, aby pojawił się w podobnym rozmiarze.

To samo, jeśli używam "em".

UPDATE:

Właśnie testowałem go w domyślnej (chyba) przeglądarka na moim Samsung Galaxy S2 i który pokazuje malutką czcionką, zbyt mały więc to nieczytelne. Przy okazji, w domyślnej przeglądarce Adroid mogę dwukrotnie klikać i rozszerza się do ładnego rozmiaru.

próbowałem tego i nie wydaje się, aby różnica:

body { 
    -webkit-text-size-adjust: none; 
} 

Answer 1

miałem spojrzeć na źródło tej strony i nie mogłem zobaczyć

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Kiedy patrzyłem na iPhone'a, nie wyglądało to na skalowanie strony, co sugeruje, że urządzenie interpretuje rozmiar strony i jako takie żadne z zapytań o media nie zostanie uwzględnione.

Dodanie metatagu widoku powinna powodować zapytania o media i zmiany czcionki, których szukasz.

info on the viewport tag

Answer 2

Jest to długi strzał, ale może pomóc trochę.

Otworzyłem http://inrix.com/traffic/Privacy na iPhone4 (iOS 5.0.1) i rzeczywiście czcionka jest naprawdę mała.

Zapoznaj się z page z @media s (Można również zobaczyć HTML5 Boilerplate's template może być w stanie wykopać coś stamtąd również w odniesieniu do problemu). Nie mam problemu z wielkością czcionki i przetestowałem poprzedni link w Chrome (wersja 26.0.1410.64 m), iOS 5.0.1 (9A405) i Android 2.3.6 z obu orientacjami (w telefonach) . Może mógłbyś coś wykopać z tych @media s.

Nie mogę się więcej zgodzić z Vector's answerYou should specify sizes when you want consistency, należy unikać nazw, gdy chcesz zachować spójność.

Wreszcie oto kilka linków do dalszych informacji:

• How we learned to leave default font-size alone and embrace the em.
• Responsive Design with CSS3 Media Queries.

Wreszcie jako alternatywnej opcji można pobrać i umieścić plik font w CSS:

@font-face { 
    font-family: 'LiberationMonoRegular'; 
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'), 
     url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; } 

Następnie w swoim resetuje wystarczy użyć czcionki:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; } 

Nadzieję, że to pomaga!

Answer 3

Co z ustawieniem wysokości linii?

Miałem ten sam problem w różnych przeglądarkach internetowych, w których czcionki miały różne pozycje. Mogłem rozwiązać ten problem, ustawiając height i .