iOS Mobile Safari portrait layout too zoomed

I would like to have my website look perfect using mobile safari on both the ipad and iphone. Currently everything looks great in landscape on some pages, but if you change the device to portrait, the whole site gets zoomed in. I am using mobile specific styles, but how can I fix this problem?

Page that doesn't work: www.zedsaid.com/apps

Page that DOES work: www.zedsaid.com/blog

CSS:

/* iPhone */
@media only screen and (max-device-width: 481px) {
#header {
  width:860px!import开发者_StackOverflow中文版ant;
}
}

/* iPad */
@media only screen and (max-device-width: 768px) {
#header {
  width:860px!important;
}
}

I am just not sure why some of my pages scale correctly (blog) but other pages (apps, contact) do not!

Try this:

body * {
-webkit-text-size-adjust: none !important;
}

or:

/* iPhone */
@media only screen and (max-device-width: 481px) {
#header {
  width: 860px;
  -webkit-text-size-adjust: none;
}
}

/* iPad */
@media only screen and (max-device-width: 768px) {
#header {
  width: 860px;
  -webkit-text-size-adjust: none;
}
}