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

cf_sql_timestamp vs cf_sql_date vs getdate()

Global SQL Procedure, System Objects and sp_ms_marksystemobject

Ghost Records, Card Recon and PCI Compliance