iOS Mobile Safari слишком увеличен

Question

Я бы хотел, чтобы мой сайт выглядел идеально, используя мобильное сафари на ipad и iphone. В настоящее время на некоторых страницах все выглядит великолепно в альбомной ориентации, но если вы измените устройство на портретное, весь сайт будет увеличен. Я использую специальные стили для мобильных устройств, но как я могу решить эту проблему?

Страница, которая не работает: www.zedsaid.com / apps

Страница, которая работает: www.zedsaid.com / blog

CSS:

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

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

Я просто не уверен, почему некоторые из моих страниц корректно масштабируются (блог), а другие страницы (приложения, контакты) - нет!

Answer 1

Попробуйте это:

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

или

/* 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;
}
}