Question

I am building a mobile optimized version of a website and testing different mobile devices but I can’t seem to figure out how to get this page to not expand past the horizontal width of the ipad.

http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

That is the page I am building. Just to clarify, on the Ipad the vertical view fits fine. But on the horizontal view it expands past the width and a user has to pinch it in order to view the full page. I am using a width container of 100% which I am assuming is the problem, but how would I make the horizontal view smaller without affecting the width of the vertical view?

Thanks in advance for the help!!

Answer 1

@SERIK; first define viewport in your in meta tag.
like this.

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

For more information must saw these link’s http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone–iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm , http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/