0

I am working with a website that works well in most browsers (all I have tested) but in iPhone (4) with ios5 it doesn't look that nice.

It somehow cut appr 80-100 px off the website's right part, and thus hide text and images.

How can I set this website to force iPhone (and iPads) to show all?

The width is 1030 px. Usually I see that iPhone then "zoom" the webpage to fit the screen, but somehow not this.

Here is the site

I have been fooling around with the css to see if it helps, but now I haven't found it.

Any idea?

Do I need to use some javascript, or should I modify the design somehow?

PS: I am not looking into making a "mobile website" right now, just get the current website to show all in iPhones etc.

Netthandel
  • 93
  • 1
  • 9
  • One term to Google around for is "viewport meta" in combination with perhaps "iPad". For example [this article](http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/) may be of interest (though it's from back in 2010 already). – Jeroen Mar 14 '12 at 09:23
  • @Jeroen Thank you. That did the trick :-) `` – Netthandel Mar 14 '12 at 10:13
  • A good to hear. You should post your final solution and findings as an answer and accept it as the answer that worked for you. – Jeroen Mar 14 '12 at 13:19
  • Yes, I have tried. But I was not allowed to post an answer to my own question before the question is at least 12 hours old. So I came back to post now :-) – Netthandel Mar 14 '12 at 20:16

3 Answers3

5

@Jeroen had the best answer in my situation:

<meta name="viewport" content="width=1030, maximum-scale=1.0" />

As Jeroen didn't submit as an answer I post it here as the answer :-)

I put the above meta in my website's , and it worked like a charm! Thank you Jeroen

Netthandel
  • 93
  • 1
  • 9
0

A couple of solutions:

1) I would try media queries to specifically target smaller devices, see here: http://www.alistapart.com/articles/responsive-web-design/

2) Alternatively you could target iOS devices directly, try this solution: Loading JS script for only iOS devices?

Community
  • 1
  • 1
egr103
  • 3,858
  • 15
  • 68
  • 119
-2

The usual solution to this kind of problems is to create different stylesheets for different browsers. Do some research to know from where is the user connecting (IE, chrome, ipad, etc) and bind css accordingly.

Th0rndike
  • 3,406
  • 3
  • 22
  • 42
  • Yes, I know. But I have been fooling around with the CSS a lot, without finding what makes iPhone render the page more narrow than it really is. I have made a decent number of websites in my life, but never found this to be an issue. All other websites I have made shows like it should in iPhones etc. It is only Safari in iPhone that do some weird things... – Netthandel Mar 14 '12 at 10:05
  • Browsers? No. Resolutions? Yes. Your should target device size or screen resolutions ( < 320px for instance). – Damien Mar 14 '12 at 10:16