How to get website to show better in iPhone and iPad? (width too little)

Question

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.

Answer 1

@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

Answer 2

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?

Answer 3

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.