I'm sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven't got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.
The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.
You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.
General Use of Viewport Tag
Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using Viewport Tag for Non-responsive Design
As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.Example
Take a look at the Themify site on your iPhone.The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.
<meta name="viewport" content="width=1024">
Another Example
If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.
<meta name="viewport" content="width=720">
Common Mistake
A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
I ADAMS KEVIN, a representative Aiico Insurance plc, we trust and respect for individual differences in day out a loan. We will provide 2% of the loan's interest rate. If you are interested in this business contact us by e-mail: (adams.credi@gmail.com) now transfer their loan documents issued properly. Do you need a loan to set up business or school if you are very welcome to Aiico Insurance plc. You can also contact us by e-mail: (adams.credi@gmail.com). We first week can request a balance transfer.
ReplyDeleteDO YOU NEED LOAN FOR PERSONAL BUSINESS? IF YOU CONTACT YOUR EMAIL ABOVE TO PROCEED WITH YOUR LOAN TRANSFER IMMEDIATELY OK.
Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.
ReplyDeleteCado Magenge
" responsive web design company melbourne | custom website design services
mobile app development company | email marketing services melbourne "