Avatar billede hulla Novice
12. juni 2013 - 07:23 Der er 9 kommentarer og
1 løsning

Detect mobil telefon med CSS3

Hej

Jeg forsøger mig med nogle media queries for at opfange om min side bliver besøgt af en mobil telefon.
Jeg er egentlig meget mere interesseret i hvor mange tommer skærmen er end hvor stor opløsning skærmen har, men det kan vist være svært at finde.

Nogen der har en sikker måde at detecte om det er en mobiltelefon der kalder en webside?

:-)
Avatar billede Blueeyez Mester
12. juni 2013 - 07:53 #1
Det er det man bruger user agent strings til: http://www.useragentstring.com/
Avatar billede hulla Novice
12. juni 2013 - 07:58 #2
Ja det kender jeg til.
Jeg er ved at lave en webside der bruger Responsive webdesign og derfor skal jeg bruge oplysningen i CSS og ikke i javascript eller serverside.
Avatar billede keysersoze Guru
12. juni 2013 - 10:46 #3
hvorfor vil du benytte tommer i stedet for opløsning - opløsning er som udgangspunkt langt det mest sigende i forhold til hvordan man vil vise sit indhold.
Avatar billede hulla Novice
12. juni 2013 - 10:54 #4
Det er jeg slet ikke enig i.
Min telefon har bedre opløsning end min bærbare, det betyder ikke at jeg gerne vil have mere indhold på min telefon. Jeg vil faktisk gerne have meget mindre indhold fordi jeg har meget mindre plads.
Det bør da være skærmstørrelsen der afgør hvor meget du vil proppe ind, ikke?
Avatar billede keysersoze Guru
12. juni 2013 - 11:00 #5
Opløsning er nok forkert forklaret - det er bredden eller højden i px, for eksempel;

@media all and (max-device-width: 480px) {
...
}

og så husk endelig

<meta name="viewport" content="width=device-width">
Avatar billede hulla Novice
12. juni 2013 - 11:20 #6
Hmm,.. ja det kan godt være jeg kan bruge noget i den retning.
Det er egentlig også den slags jeg har rodet med, men mit problem er så at min telefon har en width på 1024 px. og en height på godt 1500 px. Selvom den har den vidde så vil jeg stadig gerne have vist en mindre udgave, for den er stadig kun 5 tommer stor.

Hvad gør <meta name="viewport" content="width=device-width">?
Avatar billede hulla Novice
12. juni 2013 - 13:08 #8
Er der ingen der ved om det kan lade sig gøre at finde ud af vha. css om min telefon med en vidde på 1024px er en mobil-telefon på 4.5 tommer?
Avatar billede keysersoze Guru
12. juni 2013 - 14:44 #9
Med den meta jeg kom med og mit eksempel på media query har du din løsning - så vil din skærm ikke blive læst som 1024px.
Avatar billede hulla Novice
27. juni 2013 - 07:04 #10
Tak for det kejser, jeg er siden sidst blevet en del klogere på det, og din løsning med  <meta name="viewport" content="width=device-width"> gjorde en stor forskel.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester