The meta viewport defines the screen size to be used. It determines such aspects as the minimum and maximum width and height and also the scaling of the web page in the browser.
The viewport settings are pertinent to browsers on mobile devices such as phones and tablets which have a limited size.
If the website isn’t to be responsive then the meta viewport can be ignored. It’s probably better to configure on the assumption that a variety of devices and browsers will be used with the ability to change and adapt the viewport sizing and scaling.
The default viewport can be over-ridden by the inclusion of a viewport meta tag in the <head> section of the website page.
The example below prevents scaling of the screen.
<meta name=”viewport” content=”width=device-width, user-scalable=no”>
This example, shown below, is a more typical configuration, setting the width to be the same as the device’s width with a one to one scaling.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Viewport Options
The options associated with the viewport mobile meta tag are presented as a comma separated list of names and values within the content option. The more commonly used properties are detailed below:
Width
The width property can be set, controlling the size of the viewport, for example width=320. Alternatively device-width can be used. Device-width is defined as the width of the devices screen in CSS pixels at a scale of 100%.
Setting a width can ensure the correct view of a website which requires a minimum width, for it to render correctly – perhaps a form or image which must be seen correctly laid out,
Height
This is equivalent to the width option. Including fixed height setting by pixel value and the option of Device-height, which is similar to the device-width option, but putting emphasis on the height.
Initial-scale
The initial-scale property controls the zoom level when the page is first loaded. Setting the value to 1 will ensure that the zoom level is at 1:1 when first opened.
Maximum-scale
Determines the maximum size of the viewport content. A value of 1 appears to be the norm for this option.
Take care when setting this parameter. Its possible to prevent zooming altogether.
Minimum-scale
The minimum-scale viewport parameter is used to set a maximum zoom that can be used by visitors to the website. This can be used to prevent the visitor over zooming.
Take care when setting this parameter. Its possible to prevent zooming altogether.
User-scalable
Determines whether the user is able to resize the website in their mobile browser, or whether the size presented is fixed. The values used are yes and no.
In testing I found that using a value of no restricted the usability of the website. Preferring to be able to scale the website, zooming in and out to particular areas. A fixed size lacks the orientation view of the whole web page.
