media queries zijn voldoende of device gerichte media queries moet ook gebruiken?
ik ben aan het leren responsive websites te bouwen.
ik zoek veel informatie in Google om te leren professional website te bouwen.
ik heb gelezen over picture en src set property omimages te maken voor verschillende formaten.
ik zie that er zijn veel soort screen resoluties voor verschillende devices bijvoorbeeld x1,x2,x4, k2,k4 ,k6 etc.
voor iphone ,android, desktop ,tv andere merken.
ik ben beetje verward over media queries. ik gebruik bootstrap 4 met zijn media queries.
mij vraag is nu moet ik ook device gerichte media queries gebruiken als:
Quote:
@media
(-webkit-min-device-pixel-ratio:x (hier kan 2 zijn of 3 etc.),
(min-resolution: 192dpi) {
}
(-webkit-min-device-pixel-ratio:x (hier kan 2 zijn of 3 etc.),
(min-resolution: 192dpi) {
}
of normale media queries zijn voldoende?
ik zie Android alleen heeft mdpi,hdpi,xhdpi,xxhdpi formaten etc.
iPhone 11 pro max heeft 1242 x 2688 pixels resolutie.
k4 UHD monitor heeft 3840 x 2160 pixels.
er zijn ook k6 of k8 tv’s.
er zijn vreselijk veel formaten voor mobiel,laptop,desktop,tv.
zou het normale media queries voldoende zijn om alle beste uit te halen van alle deze formaten of moet ook device gericht media queries gebruiken?
bijvoorbeeld ik heb hier media query for mobiel:
Quote:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
}
what dan als een mobiel heeft 1242 x 2688 pixels resolutie als iPhone11 pro max .
zou media query met min device width 320 of 420 zou voldoende zijn om deze hoge resolutie van iPhone 11 pro mobiel te benaderen.
of ik moet echt in deze situatie device gerichte media queries gebruiken?
wat is u advies voor mij ik kunde niet in Google vinden de juiste uitlegging over deze onderwerp.
dank u wel
johannes
Idealiter, als je alle devices wilt dekken, definieer je een aantal intervallen voor resoluties. Bijvoorbeeld een voor mobiel (tot een bepaald maximum), een voor tablet (tot een bepaald maximum) en een voor desktop (voor alle overige resoluties).
Tenzij je website specifiek bedoeld is voor mobiele apparaten of desktops uiteraard. Dan loont het misschien de moeite om meer onderscheid te maken.
Gewijzigd op 11/05/2020 19:25:53 door Thomas van den Heuvel
johannes