From the course: Responsive Layout

Viewport - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial Buy for my team

Viewport

“

- [Instructor] Most of the videos in this course have exercise files that you can download if you want to follow along in the code. The exercise files are organized by chapter, and for each chapter there are separate folders for the code as it is before starting an exercise, and another folder for the finished code at the end of the exercise. Each video has slightly different starting codes, so there's a new file to start with for each video. This is the basic HTML that you need to start with every time you make a webpage. The important part of this for responsive websites is the meta viewport element. By default, when you make a webpage, browsers may not assume it's responsive. When setting up a webpage to work on different sized screens, you have to tell the browser that your page is responsive. The meta viewport element tells the browser how to scale the webpage and what dimensions to use. The work viewport refers to the visible space in the browser window where a webpage can be displayed. Some older sites aren't responsive, but pretty much any new site you're making now should be. For a responsive site, you're going to give that meta element two different attributes. First, you'll include width=device-width. This tells the browser that the width of the page should be the same as the width of the viewport. For example, if the viewport is 320 pixels wide, like on a small phone, the browser should display the page as 320 pixels wide. If the viewport is 1280 pixels wide, the browser will display the page at that width. On a responsive website, the page layout will always be displayed in the width of the viewport. You will also set initial-scale=1, which tells the browser that you're starting off with one pixel on the screen equal to one device independent pixel. In simple terms, this means that the page is not zoomed in or out when the page is first loaded. But you do wanna give the user, the opportunity to zoom in and out, if they wish. For example, if they need to make the text bigger to be able to read it easily. There are few attributes that will limit the user's ability to zoom so you should almost never use these, user-scalable, minimum-scale, or maximum-scale. There are rare exceptions, like perhaps if you have a web app, it's a game where zooming in and out wouldn't be appropriate. But for almost all web pages, there's no reason to stop users from zooming, and there will always be some who want or need to either for accessibility or personal preference.

Contents