webkit-min-device-pixel-ratio toepassen

Status
Niet open voor verdere reacties.

Rob Valkenburg

Gebruiker
Lid geworden
6 dec 2000
Berichten
803
Hallo,

Ik heb in een css diversen "@media" formaten (Desktop, Tablet, Mobiel) opgenomen. Nu is het probleem dat mobiel de site niet exact weergeef zoals ik dat wil.
Nu zou ik gebruik moeten maken van een pixel ratio "@media only screen and (-webkit-min-device-pixel-ratio: 1.5)". Maar ben niet echt wijzer geworden hoe ik dat toepas. Overigens is dit iets nieuws voor mij, dus probeer verschillende dingen uit. ;)

CSS:
Code:
@media screen and (min-width:320px) and (max-width:568px){
h1{
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
    color: green;
}     
.logo {
  position: relative; 
  top: -20px; 
  height: auto;
  width: 80%;
}
.sitelogo {
	display:none;
}
}

Komt die "@media only screen and (-webkit-min-device-pixel-ratio: 3*)" in mijn css bij ieder formaat? *Pixel Ratio verschilt per mobiel.
of komt dit op 1 centrale plek (bv. op de iedere pagina).

Hoop dat iemand dit mij kan uitleggen...
Thnx
 
Je hoeft geen "screen" op te nemen want met @print kan je afwijkende css voor een printer maken. Alleen als je echt iets niet op de printer wilt hebben kan je screen erbij zetten. Geen (min-width:320px) gebruiken, soms kan de css info van een smartphone net een pixel afwijkend zijn. Je @media regel van hierboven wordt
Code:
@media (max-width:568px) {
Je vraag over @media pixel ratio, die kan je gewoon erbij zetten, bijvoorbeeld
Code:
@media (min-width:568px) and (-webkit-min-device-pixel-ratio:1.5) {
Het is niet handig om voor verschillende smartphones aparte css te schrijven. Daarmee maak je het jezelf erg lastig. Hoe meer je dit doet, des te minder future-proof is de css. Met andere woorden, geen pixel ratio gebruiken, dit zijn hacks als niets anders meer werkt.
Hoe wel? Beredeneer vanuit browser view breedte, niet vanuit apparaat.
Goede kantelpunten (zoals Bootstrap) zijn min-width:576px / min-width:768px / min-width:992px / min-width:1200px

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan