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;
}

 

 

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *