MobileCheck

Mobile web glossary

27 terms that come up when you make a website work on phones, each defined in a sentence or two with the numbers that matter, then explained with an example. For step-by-step fixes, see the guides.

B

  • BreakpointA breakpoint is a viewport width at which a responsive layout changes, set with a media query, for example from one column to two at 600 px.

C

  • ChromiumChromium is Google's open-source browser project and its Blink engine, the base of Chrome, Edge, Samsung Internet, Opera and Android WebView.
  • Contrast ratioContrast ratio compares the luminance of text and background, from 1:1 to 21:1. WCAG AA needs 4.5:1 for normal text and 3:1 for large text.
  • Core Web Vitals (CWV)Core Web Vitals are Google's three user experience metrics: LCP (good ≤ 2.5 s), INP (≤ 200 ms) and CLS (≤ 0.1), at the 75th percentile of visits.
  • CSS pixelA CSS pixel (px) is the unit of length in CSS: 1/96 of an inch by definition, drawn with several device pixels on high-density screens.
  • Cumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) scores how much visible content moves unexpectedly while a page is used. Good: 0.1 or less; poor: above 0.25.

D

  • Device pixel ratio (DPR)Device pixel ratio (DPR) is how many physical screen pixels make up one CSS pixel in each direction: 2 or 3 on iPhones, about 2.6–4 on Android phones.

H

  • Horizontal scrollingHorizontal scrolling happens when content is wider than the viewport, so a phone page can be dragged sideways. WCAG Reflow forbids it at 320 CSS px.

I

  • Interaction to Next Paint (INP)Interaction to Next Paint (INP) measures how quickly a page responds to taps, clicks and key presses. Good: 200 ms or less; poor: over 500 ms.

L

  • Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) is the time until the largest image or text block in the viewport appears. Good: 2.5 s or less; poor: over 4 s.
  • Lazy loadingLazy loading delays downloading images and iframes until they are about to scroll into view, set in HTML with loading="lazy".

M

  • Media queryA media query is a CSS condition (@media) that applies styles only when the device matches it, such as a minimum viewport width or dark mode.
  • Mobile-firstMobile-first means designing and writing CSS for small screens first, then adding wider layouts with min-width media queries.

P

  • Page weightPage weight is the total size of everything a browser downloads to show a page: HTML, CSS, scripts, fonts, images and video, usually in KB or MB.
  • prefers-color-schemeprefers-color-scheme is a CSS media feature that reports whether the user chose a light or dark theme, so a site can switch to dark colors.

R

  • Responsive web design (RWD)Responsive web design is building one page whose layout adapts to any screen width with fluid grids, flexible images and media queries.

S

  • Safe area insetsSafe area insets are CSS env() values giving the distance from each screen edge that is covered by a notch, rounded corners or the home indicator.
  • srcsetsrcset is an img attribute listing several versions of an image so the browser downloads the smallest one that looks sharp on the current screen.
  • Sticky headerA sticky header stays visible at the top while you scroll, built with position: sticky or fixed. On phones it can cover much of the screen.

T

  • Tap targetA tap target is any element you tap on a touch screen. WCAG 2.2 asks for at least 24×24 CSS px; Apple recommends 44 pt and Material 48 dp.
  • Text scalingText scaling is when people enlarge text with phone or browser settings. WCAG 1.4.4 requires pages to work with text resized up to 200%.

U

  • User agent (UA)A user agent string is the text a browser sends in the User-Agent header to identify itself, its engine and its platform, such as iPhone or Android.

V

  • ViewportThe viewport is the area of the browser window where a web page is drawn, measured in CSS pixels: about 360–440 px wide on today's phones.
  • Viewport meta tagThe viewport meta tag tells mobile browsers how wide to lay out a page. width=device-width, initial-scale=1 makes it fit the phone's own width.
  • Viewport unitsViewport units size things relative to the viewport: 1vh is 1% of its height. svh, lvh and dvh pick the small, large or dynamic height on phones.

W

  • WCAGWCAG is the W3C standard for accessible web content. The current version, WCAG 2.2, has testable criteria at levels A, AA and AAA; AA is the usual target.
  • WebKitWebKit is the open-source browser engine behind Safari. Nearly every browser on iPhone and iPad, Chrome included, renders pages with it.