Viewport and responsive design and scaling

Just found that if you have a website and it rotates; then it won't resize properly on landscape with the following viewport

<meta name="viewport" content="width=device-width">

You need to specify the initial scale:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


This seems to be mainly an IOS thing.

To see the acutal sizes of viewports, see this link : http://viewportsizes.com/


Different Properties available are as follows:
PropertyDescription
widthThe width of the virtual viewport of the device.
device-widthThe physical width of the device screen.
heightThe height of the virtual viewport of the device.
device-heightThe physical height of the device screen.
initial-scaleThe initial zoom when visiting the page, 1.0 does not zoom.
minimum-scaleThe minimum amount the visitor can zoom on the page, 1.0 does not zoom.
maximum-scaleThe maximum amount the visitor can zoom on the page, 1.0 does not zoom.
user-scalableAllows the device to zoom in and out. Values are yes or no.

Comments

Popular posts from this blog

Lucee 4.5.2 cfhttp inconsistent timeout response with Adobe Coldfusion

Global SQL Procedure, System Objects and sp_ms_marksystemobject

keytool & importing new certificates / missing chains for Java