5/30/2023 0 Comments Clientx vs screenx androidYou can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. The portion of the large image that you can see through the frame is the visual viewport. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. Now image you have a smaller frame through which you look at the large image. Imagine the layout viewport as being a large image which does not change size or shape. George Cummins explains the basic concept best here at Stack Overflow: That, however, requires it to be split into two: the visual viewport and the layout viewport. The obvious solution is to make the viewport wider. So the viewport is too narrow to serve as a basis for your CSS layout. Mobile browser vendors want to offer their clients the best possible experience, which right now means “as much like desktop as possible.” Hence some sleight of hand was necessary. Even apart from the fundamental question of whether you should do that at all, the practical problem is that only very few site owners are sufficiently clued-in to cater specifically to mobile devices. One way of solving the problem is building a special website for mobile browsers. Your liquid layout would look horribly squashed. Would do exactly the same as desktop browsers, they’d make the element about 40px wide at most, and that’s far too narrow. Let’s go back to our sidebar with width: 10%. If we’d copy the desktop model one-to-one, our CSS would start to misfire horrendously. The most important problems center on CSS, especially the dimensions of the viewport. Sites must work on mobile devices, too, so we have to get them to display well on a small screen. (Some phones report larger widths, but they’re lying - or at the very least giving us useless information.)Īn intermediate layer of tablet devices such as the iPad or the rumoured HP webOS-based one will bridge the gap between desktop and mobile, but that doesn’t change the fundamental problem. Mobile browsers display significantly less of a desktop-optimised website than desktop browsers either by zooming out until the text is unreadably small, or by showing only the small part of the site that fits in the screen.Ī mobile screen is far smaller than a desktop screen think about 400px wide at maximum, and sometimes a lot less. When we compare the mobile browsers to the desktop ones, the most obvious difference is screen size. If you’re totally new to mobile I advise you to read part one about the desktop browsers first, in order to set the stage in a familiar environment. On this page we’re going to talk about the mobile browsers. Of various important elements work, such as the element, as well as the window and the screen. In this mini-series I will explain how viewports and the widths This article has been translated into Russian, Chinese, and Korean. (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable feedback. Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren The full list of browsers can also be found here. Part one of this article, about desktop browsers.
0 Comments
Leave a Reply. |