DivitoDesign

Everything for the Web Professional

Browser Compatibility Testing for the iPad

July 29, 2010 10 Comments →

Over time, I have been testing websites for compatibility issues on different browsers and devices. Back in the days, when your website renders flawless in Firefox 2.0, Internet Explorer 6.0 and 7.0, you was there. Today, Browser Compatibility goes much further.

We are now not only talking about different browsers and their different versions, but the screen size of your visitor is as important. With the rise of mobile phones and smartphones, we have another device that can cause troubles for your websites.

One of those devices is the recently released Apple iPad. With over 3 milion iPad’s sold we have a device to keep in mind. The iPad has the browser Safari installed by default, but there are a few alternatives available. Pretty difficult to keep up with all those browsers, but fortunately the support for HTML/CSS is pretty alright.

There are a few difficulties along the way as I found out today. Take a look below to read a few tips to make your website iPad compatible.

Testing Stage

How do you solve compatibility issues for the iPad when you don’t have one? Fortunately, there are always nice people that develop an app that help: iPad Peek. All you have to do is enter your URL and you see how your website looks on the iPad. Great tool, check it out.

Browser Compatibility Testing for the iPad

Safari Adds Default Styling to <input> Elements

Safari on the iPad adds specific styling the buttons. When you try to add your own style declarations to your button, the default styling overrides that. So how can we change that behavior?

This solution should work.

1

input {    -webkit-appearance: none; }

Detect iPad for Different Stylesheets

To add a stylesheet specifically for smaller devices (as the iPad and iPhone), add this between your head tags: 

1

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

You can also use this for larger devices:

1

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

This gives you more control over the look of the website for both type of devices. Pretty handy of the iPad isn’t working with you.

That’s it for today, I hope this helps.

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

10 Comments

  1. unDfind Dude says:
    August 2, 2010 at 2:15 am

    Great information. As a programmer, I can’t believe that I have to worry about even more compatibility, but the references you gave definitely helps.

    Reply
  2. Xaby Web Design says:
    August 31, 2010 at 11:01 am

    Thanks for sharing. It’s gonna be a huge help since more and more people are getting ipad. Thanks for the effort :)

    Reply
  3. Peter says:
    February 19, 2011 at 11:56 am

    Thanks for sharing.
    Always good to know what your site looks like on Mobile browsers.

    Reply
  4. trixia b. says:
    June 9, 2011 at 7:19 am

    this is a very helpful for a designer like me, thank you very much for this information!

    Reply
  5. The 100th Engadget Mobile Podcast Giveaway: win an HTC Flyer! | Singapore Casino Information. Integration Resorts. says:
    August 18, 2011 at 2:02 pm

    [...] POWERCHIP SEMICONDUCTOR PRICELINECOM QIMONDA QUALCOMM This entry was posted in Uncategorized. Bookmark the permalink. ← [...]

    Reply
  6. Google Street View heads to the Amazon, enables virtual river excursions | Singapore Catering Directory says:
    August 18, 2011 at 2:02 pm

    [...] IDENTITY SOLUTIONS KINGSTON TECHNOLOGY COMPANY KEY JDS UNIPHASE JDA SOFTWARE GROUP This entry was posted in Uncategorized. Bookmark the permalink. [...]

    Reply
  7. Back In Memphis | Pets In Singapore. Find Pet Foods and Pets here! says:
    August 31, 2011 at 6:03 pm

    [...] LOVE FAIRYTALE FAME AND FORTUNE This entry was posted in Uncategorized. Bookmark the permalink. ← Strikeforce: Josh [...]

    Reply
  8. Elvis Presley – Retro Stereo By Dr K. | Singapore Schools Directory. Primary Schools. Secondary Schools. Poly. Junior Colleges. Universities says:
    August 31, 2011 at 6:35 pm

    [...] BOY DARK MOON DATIN This entry was posted in Uncategorized. Bookmark the permalink. ← AMT Mach I Mustang [...]

    Reply
  9. Apple Already Planning Third Campus [Apple] | Singapore Catering Directory says:
    September 9, 2011 at 2:02 pm

    [...] TECHNOLOGY METHODE ELECTRONICS MENTOR GRAPHICS IMS HEALTH IMATION This entry was posted in Uncategorized. Bookmark the permalink. ← [...]

    Reply

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!