iphone & ipad enable websites

How to make your website ipad or iphone friendly?

If you used CSS with %, you are good to go.

The code will shrink your current view with this javascript code properly. Simply add this code into your header.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0;” /> 

<script type=”text/javascript”>

function hideToolbar() {

setTimeout(function(){window.scrollTo(0, 1);}, 100); }

if((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {window.onload = hideToolbar;}</script>

On the iphone if you want to prevent scaling, use this viewport meta tag:

<meta name=”viewport” content=”user-scalable=no, width=device-width” />

If you are designing for ipad a website then you might prefer  using pixel into your  CSS.

Then use this code:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
You can specify your CSS this way :

/* ipad CSS style */
#wrap {
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {

When you view your page on the ipad, either landscape mode or portrait, it will display correctly.


Please share it
Email this to someoneShare on Google+Pin on PinterestTweet about this on TwitterShare on LinkedInShare on Facebook