Viewport of non-responsive design

Source: Internet
Author: User
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.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.