CSS - Screen

About

In CSS context, a screen is a (visual) media type that is intended primarily for color computer screens.

A user agent on a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport.

See also UI - Screen

Articles Related

Resolution

The CSS resolution is always given in Css Pixel (not in Hardware pixel)

The CSS screen resolution is determined by:

• by the pixel ratio.
• and by the viewport. A screen impose a minimum width and choose an initial width based on the dimensions of the viewport.

Example:

• A mobile screen has a resolution of 1920 x 1080 px (hardware pixel) with a device pixel ratio of 2.
• The maximum width of the viewport is CSS pixel is then:

<MATH> \text{Maximum Width in CSS Pixel} = \frac{\displaystyle 1920}{\displaystyle 2} = 960 </MATH>

Q & A

Why would the same page look different on the screens with identical resolutions ?

• The device pixel ratio differs between device
• The viewport is not set

Analytics

In Google Analytics, you can find the screen resolution at Audience > Technology > Browser > Screen Resolution