The viewport is the area in which the page fits. You can specify its width and height and it can be smaller or larger than the total visible area of the screen. The scale and zoom features of the mobile browser can be used to work aroudn this. A mobile-friendly website typically should start with a visible area equal to the device’s screen width.

Setting visible area to the screen width

<!-- SET PAGE SIZE -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Stopping the user being able to change the scale

<!-- DON'T LET USER ADJUST SIZE -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Styling the page

#ui-page {
  max-width: 500px;
}