Media-querie smartphones

Status
Niet open voor verdere reacties.

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo beste,

Voor smartphones ben ik aan het testen:

  1. http://onzeautovakantiesinnoorwegen.nl/smph.html
    Code:
    <link media="only screen and (max-device-width: 480px)" href="smartphone.css" rel="stylesheet" type="text/css">
  2. http://onzeautovakantiesinnoorwegen.nl/smph-all.html
    Code:
    <link media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- iPhone 4 and 4S Portrait and Landscape -->
    <link media="only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- iPhone 5 and 5S Portrait and Landscape -->
    <link media="only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- iPhone 6 Portrait and Landscape -->
    <link media="only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- iPhone 6+ Portrait and Landscape -->
    <link media="only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- Galaxy S3 Portrait and Landscape -->
    <link media="only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- Galaxy S4 Portrait and Landscape -->
    <link media="only screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- Galaxy S5 Portrait and Landscape -->
    <link media="only screen @media screen and (device-width: 360px) and (device-height: 640px)" href="scripts/smartphone.css" rel="stylesheet" type="text/css"><!-- HTC One -->
  3. http://onzeautovakantiesinnoorwegen.nl/smph2.html
    Code:
    <link media="only screen and (max-device-width: 480px)" href="scripts/smartphone.css" rel="stylesheet" type="text/css">
    + de complete smartphone.css in het html-bestand:
    Code:
    <style>
    	@media only screen and (max-width:480px) { ...........
    	}
    </style>
    </head>

Ze doen het alle drie op de Samsung
De volgende tool https://www.google.com/webmasters/tools/mobile-friendly/ is ook tevreden over alledrie.

Maar de volgende tools implementeren alleen de laatste nummer 3. op de juiste manier = .../smph2.html
http://responsivenow.nl/test_je_site_0
http://www.responsinator.com/

Ik zou dus gewoon op safe kunnen gaan voor optie 3, maar:
het is wat omslachtig met <style>...</style> in de <head>
en ik ben vooral hartstikke nieuwsgierig naar waar 'het hem in zit'.

Een mens zou toch moeten weten waar 'ie mee bezig is, nietwaar? :)
Hoop dat iemand wil reageren,
vriendelijk dank janyep
 
Hoi, Ik gebruik max-width in plaats van max-device-width.
Voor responsive css werkt dit beter.
 
Hoi Bron
helemaal top, het werkt
hartstikke bedankt, ben er blij mee

vr groet janyep
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan