A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, user-scalable=no">
The width
property controls the size of the viewport. It can be set to a specific number of pixels like width=600
or to the special value device-width
value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height
and device-height
values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale
property controls the zoom level when the page is first loaded. The maximum-scale
, minimum-scale
, and user-scalable
properties control how users are allowed to zoom the page in or out.