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

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 ?

Analytics

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





Discover More
CSS - (Implementation|Processing Model|Rendering)

How user agents may implements CSS. A user agent processes a source by going through the following steps: Parse the source document and create a document tree (CSSOM) Identify the target media...
Boxdim
CSS - (Length) Unit

CSS The unit in CSS is the second element of a length that defines the type of the length number. Example: px, em, etc ... The recommended unit scales are: Screen: rem, em, px, % Print:...
CSS - Canvas

For all media, the term canvas describes “the space where the formatting structure is rendered.” The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite...
CSS - Media Type (Screen, Paper, ) - Medium

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use: on a screen, sans-serif fonts when displayed when printed, and...
CSS - Viewport (Reader's window)

The viewport is the viewing area on a screen media. It's then a property of media. The top media of a browser is the window (ie browser tab) As an iframe create a new window, you can set a new viewport...
How to get the CSS computed style values of an HTML element

This article shows you a snippet on how to retrieve the computed style of an HTML element
Dpi Vs Hpi Pixel
What is the Device Pixel Ratio (DPR), CSS Pixel Ratio or simply Pixel Ratio ?

This page defines what the Device Pixel Ratio (DPR) is and the effects that it has on font sizes and images.



Share this page:
Follow us:
Task Runner