When testing out my site on my iPad, the layout works as expected in landscape mode. When I try it in portrait mode, it is zoomed in, cutting off about 20% of the right hand side. And when I zoom that out, the background of the header and the footer containers only stretches the width that it was when zoomed in.

I've dug around a bit online, and I'm suspecting it might have something to do with my meta tag.

When I get rid of that tag completely, it displays the way I want it to, but gets rid of any responsive layout that I've designed for less than 767px when I load it on my iPhone. (Displays as if it wasn't responsive at all).

Any ideas as to how I might go about fixing this?

(Here's one of the pages that I'm talking about http://dotwong.com/test/tip/docking/)