Phone Scherm Afmetingen voor Populaire Modellen

In de wereld van vandaag zijn er veel apparaten waaruit mensen kunnen kiezen, en het kan ontmoedigend zijn als je probeert te zetten en te bouwen voor de beste ervaring op alle apparaten. Echter, bij het ontwerpen van websites en mobiele apparaten, is het belangrijk om bewust te zijn van de meest populaire telefoon scherm afmetingen en resoluties, zodat u uw ontwerp kunt afstemmen op het scherm van uw kijkers. Een geoptimaliseerde, responsieve website maakt het gebruikers gemakkelijker om te navigeren en uiteindelijk bevalt uw publiek.

Telefoonschermafmetingen vs. weergavegebied

Wanneer u een apparaat koopt, worden vaak zowel de schermgrootte als de resolutie weergegeven die in de specificaties worden vermeld. Schermgevoeligheid is de diagonale afmeting van het scherm in inches. Dit moet niet worden verward met de resolutie, dat is het aantal pixels op het scherm, vaak weergegeven in termen van breedte in hoogte (d.w.z. 1024×768). Omdat apparaten met dezelfde schermgrootte zeer verschillende resoluties kunnen hebben, gebruiken ontwikkelaars weergavevensters bij het maken van gebruiksvriendelijke mobiele pagina’s. Viewports hebben kleinere versies van de resolutie, waardoor websites op verschillende apparaten consistenter kunnen worden bekeken. Viewports zijn vaak meer gestandaardiseerd en hebben een lagere resolutie dan resolutie.

Hoewel desktop- en laptopmonitoren horizontaal (hoger) zijn, kunnen veel mobiele apparaten worden gedraaid om sites in horizontale en verticale oriëntatie (hoger dan breedte) weer te geven. Dit betekent dat ontwerpers en ontwikkelaars bij het ontwerpen rekening moeten houden met deze verschillen. Terwijl desktop- en laptopmonitors horizontaal (hoger) zijn, kunnen veel mobiele apparaten worden gedraaid om sites in horizontale en verticale oriëntatie weer te geven (hoger dan de breedte). Dat betekent dat ontwerpers en ontwikkelaars bij hun ontwerp rekening moeten houden met deze verschillen.

Hulp nodig om te bepalen of uw site responsive is? Gebruik onze gratis responsive viewport tool.

Coding voor verschillende Phone Screen Dimensions

Het zou voor bedrijven bijna onmogelijk zijn om elk apparaat afzonderlijk te ontwerpen. In plaats daarvan groeperen ontwikkelaars responsive projecten vaak:

Groepeer stijlen naar de meest voorkomende afmetingen voor telefoons, tablets en desktops. In dit geval wordt alles groter dan 7 inch meestal weergegeven met een desktopresolutie of… Gebruik breekpunten (gedefinieerd door de breedte van de pixels, die de weergave aanpast op basis van de schermgrootte), afhankelijk van het ontwerp en de locatie. Soms kan de ontwikkelaar beide methoden combineren als hij of zij dat nodig vindt. Het wordt aanbevolen om te beginnen met het groeperen van de typische apparaatafmetingen.

Als u een ontwikkelaar bent en de stijlen wilt maken die nodig zijn om met mobiele of responsive stijl te werken, hebben we hieronder een fragment CSS opgenomen dat kan helpen. Het is belangrijk op te merken dat deze breekpunten niet voor alle sites vaststaan en alleen als leidraad moeten worden gebruikt om mee te beginnen:

Voorbeelden:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Wat zijn de Populairste Schermafmetingen?

Omdat het belangrijk is om bij het ontwerpen van websites rekening te houden met verschillende apparaten, hebben we een lijst samengesteld van de modernste apparaten met bijbehorende pixelafmetingen en weergavevensters, die hieronder staat. Dit is een beknopte lijst, een uitgebreidere lijst met pixeldichtheid, fysieke en CSS resoluties (pixels per vierkante inch, ‘ppi’) vindt u hier.