HTML5 practice non response using ViewPort meta tag design

example

 

in non response using Viewport

 

design

if your design is too narrow, there will be problems. If you design the non response type, container width is 700px, then the effect is like a screenshot on the left side of the picture, will be a big gap in the mobile phone on the right side of the screen.

viewport label for responsiv meaning, but you may not know, he for the non responsive design also has a role. If your site or non responsive, so through this article you will learn how to use the viewport tag display effect, enhance your site in the mobile equipment.

Viewport meta tag is generally used in responsive design, for the design of a mobile device viewport width and initial-scale.

we can simply add a 720px width viewport, to fix the problem. We did not design for you to change, but iPhone will make adjustments to your 720px width.

Viewport tag uses

Another example of

< meta name=" viewport" content=" width=device-width, initial-scale=1.0" >

We all know that

screenshot picture on the left shows the effect of the site, without the use of viewport tags, we can see the page reaching the edge of the screen. Screenshot of the picture on the right is I add viewport tag after effect, I will viewport the width is set to 1024, then the mobile phone screen around the page and will maintain a certain distance.

view the Themify site in iphone.

< meta name=" viewport" content=" width=1024" > "

we all know, the default width is 980px viewport iphone. But you may not meet the design range, sometimes wide, sometimes narrow. The following two examples will show you, you can use the viewport tag to enhance mobile devices on non responsive design of display effect in what circumstances.