The doubts about viewpoint

Problem:

Why open a PC Web page on your phone , open a fixed layout page with a width of 980 on your phone, and the page will zoom to just full screen by default, without a horizontal scroll bar?

One: Device pixel and CSS pixel difference

The way zooming is implemented in modern browsers is no wonder that "stretched" pixels. Therefore, the width of the element is not modified from ten to three pixels, but the actual pixel is magnified twice times. Formally, the element is still The width of the CSS Pixel, even though it occupies a space of up to four device pixels.

In other words, zooming in to 200% makes a CSS Pixel four times times as much as a device pixel. (Width 2 times, height 2 times, Total 4 times)

In the case of scale 100% , a CSS Pixel is exactly equal to one device pixel.

Second, the desktop design of the page on the phone how to display?

First say pc web two layouts, General Web pages If you use a fixed layout will define the width of the entire page, the common width is 980px 980px 1024*768 980px 800*600 1024*768 above, so width is 980px

In the display area of the phone screen is much smaller than the desktop display, a few years ago (and now) most of the site is designed for desktop display browsing, very little consideration to adapt to the phone screen, so if you use mobile phone to browse most websites, there will be problems, such as the common fixed-width pages will appear horizontal vertical slider, Of course it's not a big problem, but if it's a Web page that browses a mobile layout, it would be very bad, imagine a width of  30%  320px  can only hold eight  

Let's talk about it. Open a PC Web page on your phone and use your phone to open a fixed layout page with a width of 980px , and the page will default to just full screen display, Does not appear the horizontal scroll bar , this phenomenon does not make me feel strange, I think this is the hand machine manufacturer's some settings caused , but the key is to do what "hands and Feet", later on-line access to a lot of information know this is because the browser of two Viewport:Layout viewport & Visual Viewport

Third, layout viewport

When the Web page is displayed, a virtual window of 980px(css pixels) is created on the device screen (the device resolution), and then the Web page is displayed using that virtual window, so the site is zoomed out. This virtual window is generally referred to as layout viewport.

In fact, the 980px CSS pixel is loaded into 320px ( Assuming the phone resolution is 320px) Under the device pixel.

default values for layout viewport:

Iv. Why use viewport?

With layout viewport seems to solve the problem of mobile browsing Web pages, but if you encounter a website specifically optimized for mobile phones, there are new problems:

For iPhone layout viewport default to 980px, resulting in 320px optimized for it The width of the page can only be displayed in a scaled way (only the phone's 30% ), then you need to Layout Viewport to set:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, User-scalable=no"/>

This meta settings layout viewport device-width
That is, when your device width is 320px layout viewport The value is also 320px Show Web page Virtual window and device width , no further scaling is required. The is also the device specifically designed for 320px A wide Web site can be used very normally.

Of course, if the site is 1000px , the use of the viewport on the phone on the phone display or will be scaled.

The doubts about viewpoint