Schermgrootten en onderbrekingspunten

Windows apps worden uitgevoerd op een breed scala aan apparaten, van tablets en laptops tot desktops, grote beeldschermen en tv's. In plaats van uw gebruikersinterface te optimaliseren voor elke schermgrootte, ontwerpt u voor een paar belangrijke breedtecategorieën, onderbrekingspunten genoemd:

• Klein (kleiner dan 640 pixels)
• Gemiddeld (641px tot 1007px)
• Groot (1008px en groter)

Breakpoints

In deze tabel worden de verschillende grootteklassen en onderbrekingspunten beschreven.

Waarom worden tv's beschouwd als 'klein'?

De meeste tv's zijn fysiek groot (40 tot 65 inch is gebruikelijk) en hebben hoge resoluties (HD of 4K). Ontwerpen voor een tv van 1080p die u vanaf 10 meter afstand bekijkt, verschilt echter van het ontwerpen voor een monitor van 1080p op uw bureau. Wanneer u rekening houdt met de kijkafstand, zijn de 1080 pixels van de tv meer als een monitor van 540 pixels die veel dichterbij is.

Het effectieve pixelsysteem van XAML houdt automatisch rekening met de kijkafstand. Wanneer u een grootte opgeeft voor een besturingselement of een onderbrekingspuntbereik, gebruikt u effectieve pixels. Als u bijvoorbeeld responsieve code maakt voor 1080 pixels of meer, gebruikt een monitor van 1080p die code, maar een 1080p-tv niet, omdat de tv 1080 fysieke pixels heeft, maar slechts 540 effectieve pixels heeft. Dit maakt ontwerpen voor een tv vergelijkbaar met ontwerpen voor een klein scherm.

Effectieve pixels en schaalfactor

XAML past gebruikersinterface-elementen automatisch aan, zodat ze leesbaar en gemakkelijk kunnen worden gebruikt op alle apparaten en schermgrootten.

Wanneer uw app wordt uitgevoerd op een apparaat, gebruikt het systeem een algoritme om te normaliseren hoe UI-elementen op het scherm worden weergegeven. Dit schaalalgoritmen houden rekening met weergaveafstand en schermdichtheid (pixels per inch) om te optimaliseren voor waargenomen grootte in plaats van fysieke grootte. Het algoritme zorgt ervoor dat een lettertype van 24 px op een groot scherm op 10 meter afstand net zo leesbaar is als een lettertype van 24 px op een klein scherm, een paar centimeter verderop.

Wanneer u uw XAML-app ontwerpt, ontwerpt u in effectieve pixels, niet in werkelijke fysieke pixels. Effectieve pixels (epx) zijn een virtuele maateenheid die wordt gebruikt om indelingsdimensies en afstand uit te drukken, onafhankelijk van schermdichtheid. (In onze richtlijnen worden epx, ep en px door elkaar gebruikt.)

U kunt pixeldichtheid en de werkelijke schermresolutie negeren wanneer u ontwerpt. In plaats daarvan ontwerpt u voor de effectieve resolutie (de resolutie in effectieve pixels) voor een grootteklasse.

Veelvouden van vier

De grootten, marges en posities van UI-elementen moeten altijd in veelvouden van 4 epx in uw XAML-apps staan.

XAML schaalt op verschillende apparaten met schaalplateaus van 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%en 400%. De basiseenheid is 4 omdat deze schaalt naar deze plateaus als een geheel getal (bijvoorbeeld 4 × 125% = 5, 4 × 150% = 6). Als u veelvouden van vier gebruikt, worden alle UI-elementen uitgelijnd met hele pixels en zorgt u voor scherpe, scherpe randen. (Tekst heeft deze vereiste niet; tekst kan elke grootte en positie hebben.)

Verwante onderwerpen

• Fluent Design - Indeling
• Responsief ontwerp
• Responsieve indelingen met XAML
• XAML-besturingselementen