Two stories of Viewports-Part Two

Original link: A Tale of Viewports-part

In this mini-series, I'll explain how the widths of viewports and various important elements work, such as

We will discuss the mobile browser on this page. If you are just touching the mobile side, I suggest you first read about the first part of the desktop browser. This will allow you to step into the familiar environment.

Problems with mobile browsers

The biggest difference between a mobile browser and a desktop browser is the screen size. For a desktop-based optimization site, the mobile browser is significantly less visible than the desktop browser, or the text is too small to read, or you can only see part of the site when zoomed in.

The phone screen is much smaller than the desktop screen, and the maximum width is 400px or even smaller (some phones are said to have a larger width, which is deceptive, or at least gives us useless information).

Tablet devices like the ipad and the rumored HP product based on webOS will narrow the gap between the desktop and the phone, but will not change the most basic problem. Because sites also need to be displayed on the mobile side, we have to make them appear normally on a small screen.

The most important issues are related to CSS, especially the dimensions of the view. CSS might not work properly if we were 1:1 of the replication desktop model.

Set the sidebar to width:10%. If the mobile browser and desktop browser work the same way, the sidebar displays at most 40px wide, which is indeed too narrow. Your self-adapting layout looks squashed.

One way to solve this problem is to design special websites for mobile browsers. In addition to the question of whether you should do so, the real problem is that only a handful of web companies will design websites for mobile alone.

The provider of the mobile browser wants to provide the best user experience for the customer, which means "as much as the desktop appears". Some tricks must therefore be used.

Two x viewports

So the view is too narrow to be the basis for your CSS layout. The obvious solution is to make the view a little wider, and we'll split the view into two parts: a visual view and a layout view.

George Cummins A good explanation of the basic concept of the view on stack overflow, "Imagine a layout view as a large picture that cannot be resized or shaped, and you can look at this picture in a very small frame." This small photo frame is surrounded by opaque material, and you can only see the picture in the frame. The picture you see in the frame is the visual view. You can take your picture frame away from the image to see the whole picture (zoom out), or just a little bit closer to the picture (zoom in). You can also change the angle of the frame, but the size and size of the picture (visual view) will not change. ”

The visual View is part of the page, as shown below. Users can scroll to view the page, or zoom to change the size of the visual viewport.

The layout of the CSS is calculated based on the layout view , so it is wider than the visual view.

Since the

How wide is the layout view? Different browsers vary. Safari/980px,opera/850px,android webkit/800px,ie/974px.

There are some browsers that are more special: ...

Scaling

Obviously, both views are measured in CSS pixels. The size of the layout view does not change when the visual view changes by scaling (if you zoom in, the CSS pixels on the screen become less). (If it changes, your page will be recalculated with a percentage of the width)

Understanding Layout views

To understand the size of the layout view, we should look at what happens when the page is completely shrunk. Most mobile browsers display pages by default in fully zoomed-out mode.

The key point is that the layout view can be fully displayed on the screen in reduced mode. (visual view equals layout view at this time)

For example, the width height of the layout view is the same as the width height in full shrink mode. These dimensions remain the same when the user zooms in.

The layout view is always the same width. If you rotate your phone, the visual view changes, but the browser zooms in on the layout view to fit the new orientation, so the width of the layout view and the visual view are still equal.

This has an impact on the height of the layout view, which is less than the actual height of the layout view in portrait mode. But web developers don't care about height, they only care about width.

Calculate Layout view

Two stories of Viewports-Part Two