Detect mobil telefon med CSS3

Det er det man bruger user agent strings til: http://www.useragentstring.com/

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.

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.

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?

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">

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">?

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

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?

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.

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.