HTML5 practice-how to use the viewport meta tag in a non-responsive design

ArticleDirectory

• Common Use of viewport labels
• Use viewport in a non-responsive design
• Common Errors
• Resource Link

Reprinted please specify original address: http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html

 

Everyone knowsThe significance of the viewport label for responsive design, but you may not know it. It also plays a considerable role in non-responsive design. If your site is still non-responsive, you will learn how to use the viewport label to enhance the Display Effect of your site on mobile devices.

 

Common Use of viewport labels

Viewport meta tags are generally used in responsive design to design the width andInitial-scale.

<MetaName= "Viewport"Content= "Width = device-width, initial-scale = 1.0">
 

 

Use viewport in a non-responsive design

As we all know, the default viewport width of the iPhone is980px. However, your design may not fit this range. Sometimes it is wide or narrow. The following two examples show you how to use the viewport label to enhance the Display Effect in non-responsive design on mobile devices.

Example

View on iPhone Themify site.

The picture on the left of the screenshot shows the effect of the site when the viewport label is not used. We can see that the page is at the edge of the screen. The picture on the right of the screenshot is the effect after the viewport label is added. I set the viewport width to 1024. At this time, the page and the mobile phone screen will be kept at a certain distance.

<MetaName= "Viewport"Content= & Quot; width = 1024 & quot">
 

Another example

If the design is too narrow, problems may also occur. Assume that your design is non-responsive and the container width is 700px. The effect is like the picture on the left side of the screenshot, which will create a large gap on the right side of the mobile phone screen.

We can fix this problem by simply adding a PX-width viewport. We didn't change your design, but the iPhone will make adjustments to fit your PX width.

 
<MetaName= "Viewport"Content= & Quot; width = 720 & quot">
 

 

Common Errors

A common error is that people do not design settings in a responsive manner.Initial-scale = 1 parameter. In this way, the page will be displayed at a rate of 100%, and no proportional adjustment will be made. In this way, people have to move the page or perform the zoom-out operation to view the whole page. The worst case is thatUser-scalable = No or maximum-scale = 1 combined with initial-scale = 1. This will disable the zoom function of the site, and users will not be able to view the entire page in this way. Therefore, you must remember that if your site is not designed in a responsive manner, do not set it like this!

 
<MetaName= "Viewport"Content= "Initial-scale = 1, maximum-scale = 1, user-scalable = No">
 

Resource Link

• IOS documentation-viewport tag
• Mozilla-viewport tag
• Opera-viewport tag

 

Address: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

 

HTML5 practice series