dagrek

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: Property Description width The width of the virtual viewport of the device. device-width The physical width of the device screen. height The height of the virtual viewport of the device. device-height The physical height of the device screen. initial-scale The initial zoom when visiting the page, 1.0 does not zoom. minimum-scale The minimum amount the visitor can zoom on the page, 1.0 does not zoom. maximum-scale The maximum amount the visitor can zoom on the page,...

There are issues with CSS displays for iphones and mobile devices where the browsers are increasing the size of seemingly random pieces of content. This occurs when the browser tries to shrink the content into the screen size. This is resolved by starting development in a greenfield site with the normalize.css which resets the defaults to so that you can start from scratch and build consistent CSS! The main issue turns out to be the CSS attribute  -webkit-text-size-adjust  which will be reset to 100% (there are similar attributes  -ms-text-size-adjust for the other browser types). Of course best practice would be to not use any px measurements also so that the screen can shrink and expand naturally.