dagrek

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.

Found this online, then forgot but used it for a funny treat on a sales system when they hit a huge target <style> .barrel_roll { -webkit-transition: -webkit-transform 4s ease; -webkit-transform: rotate(360deg); -moz-transition: -moz-transform 4s ease; -moz-transform: rotate(360deg); -o-transition: -o-transform 4s ease; -o-transform: rotate(360deg); transition: transform 4s ease; transform: rotate(360deg); } </style> <script> $(function() { /* code here */ document.getElementsByTagName('body')[0].className='barrel_roll'; }); </script> Thanks to whoever wrote it first; sorry I can't remember where it came from.