Hvorfor gir denne CSS-koden knøttsmå lenker på mobil?

[ilpostino]

Jeg har en side med lenke til denne CSS-filen. Alt fungerer fint bortsett fra lenker på mobiltelefon. Der blir lenkene knøttsmå. Jeg bruker Chrome på en Sony Xperia Z1 men jeg skjønner ikke hvorfor teksten på lenkene blir så knøttsmå. Noen som se hva jeg gjør feil?

 

<style type="text/css">
/* Vendor Prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period.
-webkit- → Google Chrome、Safari
-moz- → Firefox
-o- → Opera
-ms- → Internet Explorer 
*/
 
@font-face {
font-family: Montserrat;
src: url(public/fonts/Montserrat/Montserrat-Regular.otf);
font-family: FiraSans;
src: url(public/fonts/FiraSans/FiraSans-Book.otf);    
}
 
/* Dette definerer valg for hele siden */
body {
    color:#FFFFFF;
    background-color:#363636;
    font-weight:normal;
font-size:15px;
    left-align:5px;
    margin-top:50px;
font-family: FiraSans;
}
 
/* Dette formaterer menyen */
nav{
float:left;
margin-right:10px;
border-radius: 25px;
padding-right:10px;
position:fixed;
font-family: FiraSans;
}
 
/* Dette formaterer brødteksten */
article.vanlig {
    float:center;
width:1024px;
margin-left:260px;
}
 
/* Dette lager en container øverst på siden til overskriften */
div.overskrift {
    float:center;
clear:both;
}
 
/* Dette formaterer overskriften på sidene */
h1 {
    font-size:50px;
text-align:center;
float:center;
    clear:both;
font-family: FiraSans;
}
 
/* Dette formaterer lenkene */
A, A:Visited, A:Active {
color:#c8c4c4;
text-decoration:none;
display: inline-block;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;  
}
 
A:Hover {
text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c;
color:#transparent;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
    
/* Dette skjuler kanten rundt bilder som er lenker */
img {
    border=0;
}
 
/* Dette formaterer footeren på sidene */
footer {
float:center;
    text-align:center;
    clear:both;
padding-top:50px;
}
 
/* Alt nedenfor definerer designet for mobiltelefoner   */
@media screen and (max-device-width: 480px) {
body {
    color:#FFFFFF;
font-size:15px; 
    margin-top:50px;
}
 
h1 {
    font-size:20px;
text-align:left;
margin-left:10px;
background-color:#000000;
float:center;
    clear:both;
}
 
article.vanlig {
float:none;
width:100%;
background-color:#000000;
margin-left:10px;
}
 
nav{
font-size: 150%;
background-color:#000000;
float:center; 
clear:both;
margin-right:10px;
border-radius: 25px;
padding-right:10px;
position:fixed;
margin-left:10px;
left: 0px;
    top: 0px;
}
 
A, A:Visited, A:Active, A:Hover {
font-size: 200%;
text-shadow: none;
transform: none;
}
}
</style>

Endret 2. april 2015 av ilpostino

[ilpostino]

Jeg har oppdatert CSS-koden og rettet litt på layout men jeg har fremdeles samme problem.

 

edit: slik jeg kjenner CSS blir skriftstærelsene (re)definert i seksjonen som definerer layout for små skjermer i den nederste halvdelen. Således skal skriftstørrelsen for lenkene, såvel som alt annet bli helt lik da størrelsen er definert i body-tagen.

Endret 2. april 2015 av ilpostino

[Emancipate]

Du har gjort dødssynden og satt fontstørrelse i piksler. (font-size:15px;) Strictly forbidden.

 

Antallet piksler per cm er mye høyere på en mobiltelefon enn en pc, så 15 piksler blir mye "mindre". Bruk em, % eller pt for skriftstørrelse. Jeg anbefaler em for alle størrelser der det er mulig og gir mening. Dernest %.

 

http://www.w3schools.com/cssref/css_units.asp

[ilpostino]

Takk for oppklaring.

 

Holder på å gå over fra CSS1, PHP 4 og HTML4 til CSS3, PHP 5.5 og HTML 5 så det er en del ting jeg har blitt rusten på. 

[Emancipate]

Tidene har endret seg.

[ilpostino]

Mye sexy en kan gjøre i CSS3 og HTML5 som var uoppnåelig før.

[Djn]

Se rakst på rem, også. Størrelser i em er relative til foreldre-elementet, så "0.7em" betyr forskjellige fysiske størrelser avhengig av konteksten. Til sammenligning er rem relative til <html>-elementet, så 0.7rem er den samme fysiske størrelsen alle steder i dokumentet.

 

De kan forsåvidt også kombineres, på diverse måter; se f.eks. dette.

Endret 9. april 2015 av Djn

[haugsand]

Jeg anbefaler deg å lese følgende artikkel: Pixel-Perfect UI in the WebView

 

Oppsummering:

• Pikseltettheten på en moderne smartfelefon og en ordinær PC-skjerm er ulik. Dette fører til at teksten som standard vil være knøttliten på en mobiltelefon, om det ikke gjøres noen tilpasninger.
• Om du legger til følgende kode i head-delen HTML-dokumentet ditt, tas det hensyn til at ulike enheter har ulik pikseltetthet: <meta name="viewport" content="width=device-width, initial-scale=1">
• Du kan trygt bruke px til å angi størrelser, i stedet for em. Google anbefaler faktisk bruk av px. Å bruke px til å angi tekst-størrelser var først og fremst problematisk da IE6 var den ledende nettleseren, siden tekst angitt med px ikke ble forstørret ved bruk av browserens zoom-funksjonalitet.

[Emancipate]

Du kan trygt bruke px til å angi størrelser, i stedet for em.

Nei, det bør man absolutt ikke. Og problemet er iboende i px, og har ingenting med "feil" i IE å gjøre.

 

Enhver nettleser har innstillinger for standard fontstørrelse. Det er denne man får når man skriver inn 1em. Svaksynte kan skru opp størrelsen her. Bruker du px påvirkes ikke størrelsen av denne innstilligen, og du basically rekker finger til svaksynte.

 

I tillegg kan det være lokale forhold, som skjerm, operativsystem, standard fonter og hvor langt unna skjermen står som gjør at man ønsker å justere på denne. Jeg lagde en testkode under, og 12 px, som jeg har syntes var en fin størrelse før, er akkurat for liten på denne PCen. 1 em er derimot passe - og synes jeg ikke det kan jeg justere den selv. Jeg limte inn meta-koden din, men den gjorde ingen forskjell.

<!DOCTYPE html>

<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    
    .pixels {
        font-size: 12px;
    }
    .relative {
        font-size: 1em;
    }
    
    </style>
</head>

<body>
    
    <div class=pixels>Dette er en test av px</div>
    <div class=relative>Dette er en test av em</div>
    
</body>

</html>

[haugsand]

Jeg har en Samsung Galaxy S4, med en oppløsning på 1080 x 1920. Om jeg ikke setter meta viewport, vil nettsiden min tegnes opp med en bredde på 1080 piksler. Siden mobilens skjerm er knøttliten sammenlignet med en ordinær PC-skjerm, vil teksten derfor bli knøttliten.

 

Dersom jeg legger til meta viewport, vil nettleseren ta hensyn til enhetens device-pixel-ratio, der Galaxy S4 har en verdi på tre. Dette fører til at nettsiden min tegnes opp med en bredde på 1080/3 = 360 piksler, noe som fører til at teksten vil få en normal størrelse.

 

Les forøvrig artikkelen jeg lenket til, for å se eksempler.

 

Jeg har ikke tid til å skrive en utfyllende forklaring på de andre punktene, men dere kan lese dette innlegget: R.I.P. REM, Viva CSS Reference Pixel!. Dette innlegget diskuterer en del problemstillinger, men kunne vært litt mer balansert.

 

Chrome Developers anbefaler at du setter body { font-size: 16px; }, mens alle andre font-størrelser settes i prosent. Finner dessverre ikke igjen den nettsiden nå.

[Emancipate]

For å si det veldig enkelt, så driter begge artiklene egentlig en lang marsj i problemet jeg beskrev. I REM, Viva CSS Reference Pixel! mener ignoranten på ramme alvor at zoom og em oppfyller samme behov. To helt forskjellige bruksområder. Les alle kommentarene under REM, Viva CSS Reference Pixel!.

 

Begge artiklene koker ned til at utikleren sier "jeg mener det er best sånn". Der var vi i 1995. Vi har kommet langt nok nå til at uviklerene bør klare å svelge unna at folk har et annet syn på ting enn dem, og aksepterer brukerens innstillinger.

[The Stig]

En liten slengkommentar: Man definerer gjerne font-størrelse i piksler i body, men deretter bør man bruke em.
Font-størrelsen i body vil da fungere som utgangspunkt, så for eks

body: {
  font-size: 18px;
}

h1: {
  font-size: 1.5em; // 27px
}

p {
  font-size: 1em; // 18px
}

Dette er såvidt meg bekjent rimelig de-facto standard (se for eks. Bootstrap og Foundation).

[Emancipate]

Det er nå i hvert fall meningsløst. Ulempen med px er at man gir blanke blaffen i brukerens innstillinger. Ulempen med em er at når elementer er nøstet blir fontstørrelsen vanskelig å kontrollere. Har man først gitt blaffen i størrelsen em beregnes ut i fra er det like greit å dra fordelen av absolutte størrelser og angi i piksler over alt.

[Emancipate]

Jeg har en Samsung Galaxy S4, med en oppløsning på 1080 x 1920. Om jeg ikke setter meta viewport, vil nettsiden min tegnes opp med en bredde på 1080 piksler. Siden mobilens skjerm er knøttliten sammenlignet med en ordinær PC-skjerm, vil teksten derfor bli knøttliten.

 

Dersom jeg legger til meta viewport, vil nettleseren ta hensyn til enhetens device-pixel-ratio, der Galaxy S4 har en verdi på tre. Dette fører til at nettsiden min tegnes opp med en bredde på 1080/3 = 360 piksler, noe som fører til at teksten vil få en normal størrelse.

 

Bare for å presisere, så mener jeg ikke at man ikke bør bruke meta viewport. Men at bruk av em har mange andre fordeler og bruksområder i tillegg til å skalere etter skjermstørrelse. Man må gjerne bruke begge deler. Men å endre pikselstørrelsen er ikke en erstatning for å bruke em.

[haugsand]

Jeg er enig i din siste kommentar, Emancipate. Å bruke meta viewport er et viktig hjelpemiddel for å kunne mobiltilpasse en nettside, men er ikke relatert til diskusjonen om hvilken enhet som bør brukes til å bestemme tekststørrelse.

 

Det var interessant å se hvordan text-size/zoom har utviklet seg de siste årene, men jeg kan ikke si meg enig i alt som står i artikkelen jeg lenket til isted.. Jeg er selv en bruker av em, og har brukt denne metoden mye opp gjennom tidene: How to size text using ems.

 

Fordelen med å angi tekststørrelse i piksler i body, og ellers bruke relative enheter, er at størrelsesforholdet mellom de ulike elementene bevares. 

 

Det er mulig jeg tolker utsagnet ditt feil, men em skalerer i forhold til arvet tekst-størrelse, og ikke skjermstørrelse. 

 

Her er forøvrig Googles anbefaling: Use Legible Font Sizes

[Emancipate]

 

 

Fordelen med å angi tekststørrelse i piksler i body, og ellers bruke relative enheter, er at størrelsesforholdet mellom de ulike elementene bevares.

Ja, men det kan også være en ulempe i noen situasjoner. Hvis man ikke på forhånd vet hvilke elementer som er på siden, fordi siden genereres dynamisk.