in de wereld van vandaag zijn er een overvloed aan apparaten voor mensen om uit te kiezen en het kan ontmoedigend zijn om te proberen tegemoet te komen en te bouwen voor de beste ervaringen op alle apparaten. Het is echter belangrijk om up-to-date te blijven met de meest populaire schermformaten en resoluties bij het ontwerpen van web-en mobiele sites. Een site die is geoptimaliseerd en responsief zorgt voor een eenvoudiger gebruikersstroom en uiteindelijk, een plezierige ervaring voor uw publiek.,
schermgrootte, resolutie en Viewport: wat betekent dit allemaal?
wanneer u een apparaat koopt, ziet u vaak zowel de schermgrootte als de resolutie in de specificaties. De screensize is de fysieke meting diagonaal van het scherm in inches. Dit is niet te verwarren met de resolutie, dat is het aantal pixels op het scherm vaak weergegeven als een breedte door hoogte (dat wil zeggen 1024×768). Omdat apparaten met dezelfde schermgrootte zeer verschillende resoluties kunnen hebben, gebruiken ontwikkelaars viewports wanneer ze mobiele vriendelijke pagina ‘ s maken., Viewports zijn Verkleinde versies van resoluties waarmee sites consistenter kunnen worden bekeken op verschillende apparaten. Viewports zijn vaak meer gestandaardiseerd en kleiner dan resolutie groottes.
terwijl desktop-en laptopschermen in landschapsoriëntatie staan (breder dan hoog), kunnen veel mobiele apparaten worden geroteerd om websites in zowel landschaps-als portretoriëntatie (groter dan breed) weer te geven. Dit betekent dat ontwerpers en ontwikkelaars moeten ontwerpen voor deze verschillen.
hulp nodig bij het bepalen of uw website responsief is? Gebruik ons gratis MG-hulpmiddel, responsieve Ontwerpcontroleur.,
terwijl desktop-en laptopschermen in landschapsoriëntatie staan (breder dan hoog), kunnen veel mobiele apparaten worden geroteerd om websites in zowel landschaps-als portretoriëntatie (groter dan breed) weer te geven. Dit betekent dat ontwerpers en ontwikkelaars moeten ontwerpen voor deze verschillen.
responsieve Styling
Het zou bijna onmogelijk zijn voor bedrijven om voor elk afzonderlijk apparaat te ontwerpen. In plaats daarvan, bij het programmeren van responsieve ontwerpen, groeperen ontwikkelaars vaak:
- De styling in de meest typische apparaatformaten voor telefoons, tablets en desktops., In dit geval wordt alles wat groter is dan 7 inch meestal weergegeven op de desktopresolutie of-
- gebruik breekpunten (gedefinieerde pixelbreedtes die het scherm de lay-out aanpast op basis van de schermgrootte) afhankelijk van het ontwerp en de lay-out
soms kan een ontwikkelaar ervoor kiezen om beide methoden te combineren als hij dat nodig acht. We raden aan om te beginnen met het groeperen van typische apparaatformaten.
als u een ontwikkelaar bent en op zoek bent naar de benodigde stijlen om mobiele of responsieve styling te verwerken, hebben we hieronder een fragment van CSS opgenomen dat kan helpen.,d alleen worden gebruikt als een gids aan de slag te gaan:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* begin van de grote tablet stijlen */
}
@media screen and (max-width: 767px) {
/* start van het medium tablet stijlen */
}
@media screen and (max-width: 479px) {
/* start de telefoon stijlen */
}
Meest Populaire schermresoluties
in de Wetenschap dat de toets te bieden voor de vele verschillende apparaten die bij het ontwerpen van websites, we hebben een lijst samengesteld van de meest up-to-date apparaten met hun respectieve pixel maten en viewports hieronder., We hebben deze informatie ook in een handige downloadbare PDF gezet.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Deel met ons op Facebook!