Viewport of non-responsive design

Organized from: Viewport Meta Tag for non-responsive
Chinese Original: Viewport of non-responsive design
Please respect the copyright, reproduced please indicate the source, thank you ~ ~

You're already very familiar with responsive web design, but we usually overlook many old, unresponsive Web sites that are more critical to the user experience of mobile terminals-because they don't make any optimizations for mobile devices.

General Viewport

For responsive web sites, this is often defined as:

1

Non-responsive web site

But you might know that the IPhone (including Android) usually renders the site by default at 980px, which means that if you don't define viewport, if your site is wider than 980 or less than 980, The iphone will use the default to scale and render with a 980px window, which can have a variety of problems.

Like what:

The previous picture is not set viewport situation, the page width is more than 980px parts will be truncated, the following is set the actual width (1024) After the performance, well, just simply put the page viewport set to the actual width:

1

When the actual width of the page is too small, there will be problems:

The width of the container is 700px, so the default is to leave white, and after setting the viewport, the page looks more crisp:

1

Common errors

1

A common mistake is that many people often use initial-scale=1 to a non-responsive web site, which makes the site 100%-width rendering without automatic scaling, and users need to manually move the page or zoom in. The worst thing is to use User-scalable=no or maximum-scale=1 at the same time as initial-scale=1, which will make your site scalable--users can't zoom in and out of the page to see all of the content. So, remember: If your site is not responsive, do not use Initial-scale or disable scaling.