Essentially, Viewport is the size of the window in which you are viewing your website. On the desktop, you are seeing the website on a browser that is considered as the full size i.e. the size of the browser and you can shrink your browser.
The portion of the browser on which you are viewing the website is essentially the viewport on your desktop. The viewport on a mobile device, however, is not so obvious. For ex: Assume that there is a mobile screen and if it is 360PX wide. But that doesn’t necessarily mean that the viewport of the browser on the mobile that you are using for viewing the website will be 360PX in width even though it seems that way the browser takes up the full width of the mobile screen.
It is not always the case. Now, most mobile browsers by default have a viewport over 800PX. So the static or responsive websites that were originally intended for desktop can’t be viewed full on mobile devices. This is the effect of squashing the desktop content to fit onto the 360PX screen. So that is why we can see the contents of the website in a very small size on the mobile devices.
Consider Another example: Assume that you are using a mobile safari which has a viewport of about 980PX width consider that it is a browser width of one mobile and also consider that there is above mobile that has a width of 320PX. Now if we want to view all of the contents in the 360PX width mobile safari then we will have to squash all of the content, i.e. it will just squash it off to the mobile device so everything is equally small. So in order to get around this, we will have to override it using the meta viewport tag.
Using this meta viewport tag we can specify a specific width for the viewport so the responsive CSS can change the design for this kind of width. So that it is not squashed and is an easily accessible form.
So how do you use meta tag viewport to control the layout in the desktop view for this we need a modern browser and any HTML editor or notepad and we also need a web technology like HTML.
Meta Viewport Tag:
Assume that there is a website and you are viewing it on a mobile device, but soon after you come to know that the view is not good and you are also not able to resize the website or you can say that the site is not accessible properly.
It may have been due to a mistake in code by the developer i.e. the developer could have made user-scalable=no. Which has taken away the user’s ability to resize this web page making it unusable on the mobile device. Also because of this, you could not read it or you could not make a decision about the product. So it is not good to leave out on meta viewport tag, in case if you are making a mobile-friendly website.
Also if you do not use meta viewport tag then you may not be able to view the website properly on the mobile. Also, you are not able to resize it. So it is important that in your Head section you can add meta viewport tag as <metaname =”viewport” content=”width=device- width”> It will help the page to look little bit good for portrait mode . So in addition to < metaname =”viewport” content=”width=device-width, initial-scale=1″> this is what all your web page should have.
So you need :
< metaname =”viewport” content=”width=device-width, initial-scale=1″> using this the page looks good in the portrait as well as in landscape mode.
Now there are few other values that we can put into the meta viewport. But basically, minimum scale, maximum scale and of course user-scalable is what the site should look after.
The only time you might want to take away the user’s ability to zoom in and scale a particular web page is if it’s truly a web application and all the features are designed for that application. But for a responsive website one style based on desktop users and the mobile users, these are the two with which we are going to stick with and use initial scale=1.
Visit – Hostdens
You must log in to post a comment.