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 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