Rozmiar czcionki CSS nie działa poprawnie na urządzeniu mobilnym

Question

Pracuję nad małym projektem dla szkoły, w którym musimy włączyć html5 i css3. Jest to dopiero początek, ponieważ próbuję utworzyć dwa osobne pliki css dla wersji mobilnej i desktopowej.

W wersji dla urządzeń mobilnych staram się, aby menu było wyświetlane jako lista, ale z większą czcionką. Nie mogę w żaden sposób tego zrobić.

To css dla menu:

nav ul { 
    list-style: none; 
    background-color: green; 
    padding: 0; 
} 

nav li { 
    border-bottom: 1px solid black; 
    padding: 5px; 
} 

nav { 
    margin-top: -36px; 
    width: 100% 
} 

nav h1{ 
    margin: 0; 
} 

Stwarza następujących na moim pulpicie I na moim iPhone

font-size jest ustawiony na 1 em w HTML w wierzchołek pliku. Ale 1em nie jest wystarczająco duży dla urządzeń mobilnych, więc chcę go większy, co wydaje się niemożliwe.

Nawet kiedy daję nav h1 się rozmiar czcionki na 10em, to nie ma się większe niż to:

Podczas gdy na pulpicie to działa bez problemu, nie wygląda to tak:

Ten sam problem występuje, gdy próbujemy zwiększyć liczbę postów na blogu, po prostu tego nie zrobią.

Zwykle nie mam problemu z pracą z CSS, ale tym razem nie mogę tego rozgryźć. Mam nadzieję, że ktoś może pomóc! Mam przeczucie, że to coś bardzo oczywistego.

Oto pełna CSS: http://snipt.org/zLic5

Oto html: http://snipt.org/zLid2

Answer 1

Widziałem twój kod html. nie dodajesz żadnego metatagu. niektóre znaczniki meta są wymagane, gdy rozwijają mobilną stronę internetową,

na przykład trzeba dodać -

<meta name="HandheldFriendly" content="true" /> 
<meta name="MobileOptimized" content="320" /> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /> 
<title>Welcome to your school name</title> 

<!-- smart phone css --> 
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" /> 

<!-- Tablet --> 
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" /> 

<!-- Desktop --> 
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)"> 

Answer 2

widzę parę rzeczy, myślę, że można pomóc swojej sytuacji. Semantycznie nie chcesz używać tagów <h1> na liście menu. Usuń te znaczniki i zastosuj stylizację do stylu CSS nav li i odpowiednio dostosuj dopełnienie. Ponadto, tylko zalecenie, ale słyszałem z kilku stron, że idealne rozmiary czcionek mobilnych to pt.

Mam nadzieję, że to pomoże.

Answer 3

Wróć do korzystania z nawigacji li.

Następnie ustaw rozmiar czcionki na coś akceptowalnego (14 pikseli lub 16 pikseli).

Następnie, w swoich css, użyj zapytań o media.

@media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile) 
    li { 
    font-size:18px; // larger font (or whatever you want to do 
    padding: 20px; // can even increase your padding 
    } 
} 

Answer 4

właściwość Try css text-size-adjust do skalowania tekstu na urządzeniach mobilnych. Coś jak:

nav { 
    text-size-adjust: 200%; 
} 
nav ul { 
    text-size-adjust: 300%; 
} 
nav h1 { 
    text-size-adjust: 400%; 
}