The function of the viewport is to constrain the element, which is the Concept: the viewportīefore we continue with more JavaScript properties we have to introduce another concept: Of CSS pixels that have been scrolled out of the window remains (roughly) the same. It means that in practice window.pageX/YOffset doesn’t really change: the number The top of the visible page when the user zooms. However, the browsers try to keep web pages consistent by keeping the same element at In theory, if the user scrolls up and then zooms in, window.pageX/YOffset willĬhange. Has already been scrolled up, whatever zoom state it’s in. You want to know how much of the document These properties are measured in CSS pixels, too. Window.pageXOffset and window.pageYOffset,Ĭontain the horizontal and vertical scrolling offsets of the document. Measured in CSS pixels Browser errors None Window.pageX/YOffset Meaning Scrolling offset of the page. (This is mostly for historical reasons.) Scrolling offset Note that the measured widths and heights include the scrollbars. On desktop, but fatal on mobile, as we’ll see later.) (The exception here is Opera, where window.innerWidth/Heightĭo not decrease when the user zooms in: they’re measured in device pixels. Window.innerWidth/Height reflect that by decreasing. So if the user zooms in you get less available space in the window, and Of your layout you can squeeze into the browser window, and that amount decreases as the user Obviously, the inner width of the window is measured in CSS pixels. You can find these dimensions in window.innerWidth and window.innerHeight. That tells you exactly how much space the user currently has available for your CSS layout. Instead, what you want to know is the inner dimensions of the browser window. Measured in CSS pixels Browser errors Not supported by IE. Window.innerWidth/Height Meaning Total size of the browser window, including scrollbars. Make sure that your layout retains the same ratios. Test your sites in 100% zoom, but even if the user zooms in or out the magic of CSS pixels will You shouldn’t overly worry about it in your daily work. The concept of 100% zoom is very useful in the explanations that are going to follow, but It’s time to define that slightlyĪt zoom level 100% one CSS pixel is exactly equal to one device pixel. I started the example by assuming a zoom level of 100%. The browser will automatically make sure that your CSS layout is stretched up or squeezed in. However, that zooming level doesn’t matter to you. In or out until he can comfortably read it. Not to the user the user will zoom the page Those pixels that dictate how your style sheet is rendered.ĭevice pixels are almost entirely useless to you. The point here is that you are only interested in CSS pixels. The CSS pixels start to grow, and now one CSS pixels The CSS pixels start to shrink, meaning that oneĭevice pixel now overlaps several CSS pixels. Much to see here CSS pixels fully overlap with device pixels. (Two times the width, two times the height, yields four times in total).Ī few images will clarify the concept. In other words, zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. Of 128 CSS pixels, even though it happens to take the space of 256 device pixels. Instead the actual pixels are doubled in size. That is, the width of the element is not changed from 128 to 256 pixels Zooming as implemented in modern browsers consists of nothing more than “stretching If the user zooms to 200%, yourĮlement with width: 128px will fit only four times on his 1024px wide monitor. If the user zooms, however, this calculation is going to change. Monitor eight times (roughly let’s ignore the tricky bits for now). Is 1024px wide, and you maximise your browser screen, the element would fit on your If you give a certain element a width: 128px, and your monitor Working on, and can (in general) be read out from screen.width/height. These pixels give the formal resolution of whichever device you’re The first concept you need to understand is CSS pixels, and the difference with device pixels.ĭevice pixels are the kind of pixels we intuitively assume to be “right.” Prior discussion on terms everybody already knows will greatly help your understanding of the On mobile we’ll find the same concepts, but more complicated, and a Most web developers will already intuitively understand This page is about the desktop browsers, and its sole purpose is to set the stage forĪ similar discussion of the mobile browsers. Of various important elements work, such as the element, as well In this mini-series I will explain how viewports and the widths
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |