Résolution d'écran, orientation et dimensionnement de la mise en page
Adaptez les mises en page easyCMS à vos écrans, portrait et paysage, choix de résolution, rotation de la sortie du lecteur et expliquez pourquoi le contenu apparaît étiré ou comporte des bandes noires.
Content that looks stretched, letterboxed, cropped or sideways is nearly always a mismatch between three things: the layout’s resolution, the player’s output resolution, and the physical orientation of the screen.
Design the layout at the screen’s real resolution
A layout has a fixed resolution, chosen when you create it. Pick the one that matches the screen:
- 1920 × 1080: standard landscape Full HD. The default, and the right answer for most screens.
- 1080 × 1920: portrait Full HD, for a screen physically rotated 90°.
- 3840 × 2160: 4K landscape. Read the note below before you choose it, because on Android it does not do what the number suggests.
If the layout aspect ratio does not match the screen, easyCMS scales it to fit and you get black bars, or scales to fill and you get cropping. Neither is a bug, the fix is to rebuild the layout at the right resolution, not to stretch it afterwards.
Portrait screens
Portrait needs a decision at three levels, and all three must agree:
- Physical: the screen is rotated on its mount.
- Player output: the device outputs a rotated image. On Windows that is the graphics driver’s rotation setting, and commercial panels usually have their own rotation option in the TV menu. On Android it lives on the settings profile your account shares, so it is a change to ask us for rather than one you make per device, and it has to match the way the screen is physically mounted or you get a rotated layout on an unrotated panel.
- Layout: the layout is created at 1080 × 1920.
The most common mistake is rotating only the layout: a portrait layout sent to a landscape output is squeezed into a thin strip in the middle of the screen. The second most common is rotating at two levels, the player and the screen, which cancels out and leaves you upside down.
Where possible, rotate at the screen and leave the player outputting its native landscape signal, since some devices lose hardware video acceleration when the output is rotated in software. If video plays fine in landscape and stutters in portrait, that is what has happened, rotate at the screen instead.
4K, and what actually happens on Android
Choosing a 3840 × 2160 layout does not give you a 4K interface. On an Android player the interface, images and web content render at 1080p and are upscaled to the panel; only video decodes natively at 4K. easyCMS reports such a display as 1920 × 1080, which is correct rather than a bug, and is where most “my 4K screen is detected wrong” tickets come from.
Tip For a 4K panel, build the layout at 1920 × 1080 and put 4K-encoded video files on it. You get the native 4K video the panel is for, without quadrupling the size of every image and burning storage quota on pixels nobody sees.
Sizing video to the space it fills
Videos are scaled into the space they occupy. For a clean result:
- Encode the video at the aspect ratio of the space it fills.
- A full-screen video in a 1920 × 1080 layout should be a 1920 × 1080 file.
- A video filling a portrait space should be encoded portrait, not a landscape file rotated by the player.
Letting the player rescale on the fly costs performance on low-end hardware and is a frequent cause of stutter, see Videos Will Not Play or Stutter.
Overscan: content running off the edges
If a few pixels are cut off around all four edges, the TV is applying overscan. Look in the screen’s picture settings for Just Scan, Screen Fit, 1:1, Full Pixel or PC mode and enable it. Some screens only disable overscan when the input is labelled as a PC. Do not compensate by shrinking your layout, fix it at the screen.
Mixed screen sizes in one network
Screens of different resolutions but the same aspect ratio can share one layout: a 1920 × 1080 layout scales cleanly to a 3840 × 2160 screen. Different aspect ratios cannot share a layout without compromise. Group displays by aspect ratio and schedule the matching layout to each group, see Scheduling Content.
Design text for the worst case in the group. Text that is comfortable on a 55” screen at 2 metres is unreadable on a 32” screen at 6 metres.
Related articles: Creating Layouts, Videos Will Not Play or Stutter, Connecting Your First Display