You're back on the Blog. What is this? Someone other than Google appreciates our efforts... Subscribe and get new posts in your inbox.
If like 3 million other people you’ve forgotten all about the initial worldwide ridicule and gone and bought yourself an iPad, you might be unpleasantly surprised by how your website looks and behaves on it. I know I was.
One of the problems that’s come to our attention is that the ‘one finger scroll‘ doesn’t work, below the fold content is ‘lost’ as nothing happens when you try to scroll. Apple advise using your two thumbs to scroll, which does work fine, however most of us have become accustomed to the traditional one finger method.
The second and equally horrifying issue from a web design point of view is that small fonts are auto scaled up to 12px, making them easier to read without zooming in but messing up layouts and making those discreet footers appear as large as body text or headings. Mmmm, nice.
And so, without further ado, here are the iPhone/iPad fixes…
Save iscroll.js from here and upload to your server then place the code below within your page head tags to enable one finger scrolling;
|
<script type=”text/javascript” src=”js/iscroll.js”></script>
|
|
<script type=”text/javascript”> var myScroll; function loaded() { document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); }); myScroll = new iScroll(‘content’); } document.addEventListener(‘DOMContentLoaded’, loaded); </script>
|
Add this code to the css to stop small fonts auto resizing;
|
style=”-webkit-text-size-adjust:none”
|
Taa daa… Your website now looks and works great (well, better) on the iPhone and iPad.
Tags: Fixes, Font Sizes, iPad, iPhone, iScroll, One Finger Scroll, Web Design Companies
