Mobile - Using the HTML meta viewport tag
The meta viewport tag tells the browser to render the page at a specific resolution.
By default, mobile browsers render at a desktop resolution, 980px is common, and then scale the output to the actual screen size. See screenshots below.
This strategy works great for sites that were designed for the desktop. Because desktop sites generally do not (or historically did not!) look good on narrow screens, though the situation is improving. Try resizing your browser window.
If the mobile browser didn't render to a logically larger screen by default, many sites would be unusable on small screens.
When you use the meta viewport tag, you tell the browser that your site is designed for mobile, and that no output translation is necessary.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
width=device-width sets the viewport width to the actual pixel width of the device
initial-scale=1.0 sets the zoom level to 100%
user-scalable=yes enables pinch zooming.
Screenshots
The only difference in the screenshots below, is the presence or absence of the meta viewport tag.
without meta viewport
![[without-meta-viewport.png]](images/without-meta-viewport.png)
with meta viewport
![[with-meta-viewport.png]](images/with-meta-viewport.png)