The definitive article
If you want to understand Viewport, read this excellent article A tale of two
viewports. The two viewports are layout viewport and visual viewport. The article has detailed explanation and diagram illustration, is well organized, informative, easy to understand. I took some notes here as my reading notes.
Two viewports
Viewport is exactly equal to the browser window. The viewport is not an HTML construct, so you cannot influence it by CSS. It just has the width and height of the browser window on desktop. On mobile, there are the visual viewport and the layout viewport. The visual viewport is the part of the page that’s currently shown on-screen. The layout viewport is considerably wider than the visual viewport. The CSS layout are calculated relative to the layout viewport.
CSS pixel and device pixel
CSS pixel indictates how your style sheet is rendered, and device pixel is used to measure user's screen which never changes. At zoom level 100% one CSS pixel is exactly equal to one device pixel. Zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. If the user zooms in you get less available space in the window (so window inner width/height is decreasing).
screen.width and screen.height are measured in device pixel. They contain the total width and height of the user’s screen (never change).
window.innerWidth and window.innerHeight are measured in CSS pixel. They are the inner dimensions of the browser window, tell exactly how much space the user currently has available for the CSS layout. They include scroll bars.
window.pageXOffset and window.pageYOffset are measured in CSS pixel. They contain the horizontal and vertical scrolling offsets of the document.
document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions of the <html> element. They don't include scroll bars.
document.documentElement.offsetWidth and -Height gives the dimensions of <html> element.
So basically we have 5 different views, namely screen > window > viewport -> scrolling -> html
Viewport width on mobile
For layout viewport width, different browsers have different value. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px. The <html> element takes the width of the layout viewport initially, and CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.
The layout viewport width is always the same. If you rotate your phone, the visual viewport changes, but the browser adapts to this new orientation by zooming in slightly so that the layout viewport is again as wide as the visual viewport. (?? don't fully understand this because layout viewport width is expected to be wider than visual viewport) Web developers don’t care about the height, only about the width.
document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.
window.innerWidth and window.innerHeight contain the visual viewport's dimensions. Obviously the measurements change when the user zooms out or in, since more or fewer CSS pixels fit into the screen.
Event coordinates
pageX/Y is still relative to the page in CSS pixels
clientX/Y is relative to the visual viewport in CSS pixels (?)
screenX/Y is relative to the screen in device pixels
Media Query
There are two relevant media queries: width/height and device-width/device-height.
Use width and forget device-width — on desktop
Meta viewport
<meta name="viewport" content="width=320">
No comments:
Post a Comment