CODEWITHSUNDEEP
iphonemobile-safariweb-deployment
mnowotka
mnowotka

Reputation: 17258

How to test and adjust a website for iphone?

I developed this website

It looks fine on most browsers and OSes on PCs. It even looks nice on my HTC with Opera Mobile. Unfortunately I keep getting reports about how it displays on iphones. I don't have an iphone so here are my questions:

  1. Is there an easy way to reliably check (emulate) my website on iphone (I tried sites like this but what this site does it opens iframe in safari trying to emulate ihopne native screen size, but the problem is somewhere else...)?

  2. Any quick tips on obvious mistakes I made?

Thanks for help

Upvotes: 0

Views: 637

Answers (2)

mnowotka
mnowotka

Reputation: 17258

I partially found the answer. As it turned out most mobile browsers (including safari for iphone and default browser in samsung galaxy) don't support

{ background: transparent;}

So I need to provide fallback colour as described here: http://css-tricks.com/rgba-browser-support/

Upvotes: 0

sergio
sergio

Reputation: 69047

If you have got a computer with MacOS installed (it could even be a hackintosh), you can install Xcode there and then run the iPhone simulator from it. Once you are there, you can open Safari in the simulator and enter your site URL to have a look.

I am also attaching a snapshot of the simulator with your home page. enter image description here

You might try defining the viewport in your HTML:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Also, have a look at the other meta tags available in Mobile Safari.

Upvotes: 1

Related Questions