0

So I am creating a wordpress theme, which is looking really nice already on all modern browsers, but it seems like everything I do looks different on the iPad. Especially modern techniques like CSS linear gradient and box-shadow. They don't work at all. Also some images do not display correctly, and I have a right margin of 2px alongside the whole container.

Normally I would use a tool like Firebug or something like it to debug the code on that device. But since I don't have an iPad myself this is becomming a pain in the ass for me.

I've seen that there are tools on the internet who pretend to display my site like if I was viewing it on a real iPad, but all I get is a nice iPad frame that displays the site exactly like the browser I'm using.

So, how would you tackle this problem? How would you make sure your design works well on every device, even if you don't have one to test with?

Also, how well does the iPad support modern webstandards? Is it really true I can't use any html5/css3 techniques for it or do I just have to take a different approach for mobile devices?

Forza
  • 1,619
  • 3
  • 28
  • 49

1 Answers1

1

First off, I think you mean "desktop browsers" instead of "modern browsers", with that in mind it seems that you are having difficulties using different CSS3 properties. Some of which might not be supported in iOS Safari.

A good page for you to read would be the Safari Web Content Guide on Apples developer site. I don't think there is a straight answer telling "how well iOS / iOS Safari complies to CSS3 compared to desktop browsers", however there are some charts. I did a quick search and found some outdated charts from 2007 (link) but they might still be of use for you. What I do believe is that there is very litte difference between how the iPhone or iPad support modern web standards (HTML5 & CSS3), the version of iOS (or better yet iOS Safari) might make more of a difference.

A good page to check would be Can I use.com. You can check for different CSS3 or HTML5 functions and see if they are supported in iOS Safari.

Regarding the testing; if you are on a mac you could download XCode. XCode includes the iOS Simulator which you can test your sites in. Both iPad and iPhone (3.5" & 4"). Give it a try. Of you are running Windows, the only option I see is to run a VM with OS X on it (which I believe is not allowed by Apple) and do the same as mentioned above. Without having read the post myself, this guide might seem promising. This answer answers your question quite adequately.

Community
  • 1
  • 1
Paul Peelen
  • 10,073
  • 15
  • 85
  • 168