2016-06-10 1 views
0

Думаю, я схожу с ума.отзывчивый/viewport, работающий в браузерах, но не в ios

У меня есть сайт (временный URL-адрес: http://dev.designersnorthwest.com, я удалю этот URL-адрес в конце концов, потому что он является сайтом тестирования и истечет), что медиа-запросы и отзывчивое поведение работают с точным изменением размера в Chrome, Firefox и Safari , и отлично работает на моем телефоне Android, но по какой-то причине я не могу понять, что он не будет работать на нескольких iPhone и iPad, на которых я тестировал.

Чтобы ответить на ваш первый вопрос, мой видовой экран определенно есть ...

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

... и я даже пытался ставить в каждой CSS версии я мог убедиться, что это не проблема.

@-wekbit-viewport{width:device-width;zoom:1;} 
@-ms-viewport{width:device-width;zoom:1;} 
@-o-viewport{width:device-width;zoom:1;} 
@viewport{width:device-width;zoom:1;} 

Еще не кубики. Я проверял свои медиа-запросы, и код выглядит хорошо. Я здесь в затруднении. Любые предложения будут ценны.

ответ

0

Похоже на IOS устройств, ваш сайт нагнетание дополнительные окна просмотра мета-тег в <head>:

<meta name="viewport" content="width=1100"> 

Вот что я увидел на моем iPhone6 ​​тренажере, и это, вероятно, подменяют первый видовых мета-тег , Я предполагаю, что у вас есть плагин WordPress, который пытается быть слишком умным и вводит этот дополнительный тег только для устройств iOS. Я бы рекомендовал, чтобы ваш первый шаг должен был проверять ваши плагины, отключать все, что может быть виновником, и подтвердить, что тег пропал, используя free Xcode iOS simulator и debugging with Safari.

Удачи вам!

+0

Спасибо за ваш ответ. У меня есть пара вопросов, если вы не возражаете: 1) Я сейчас ищу в симуляторе iPhone Xcode - как мне «отлаживаться с помощью Safari»? Я смотрю меню «Отладка», и я не вижу ничего, что могло бы мне помочь. 2) Из любопытства, какой инструмент вы использовали, это помогло открыть этот дополнительный видовой экран? –

+0

Следуйте инструкциям в последней ссылке в моем ответе. В принципе, как только «Веб-инспектор» включен в вашем симуляторе iPhone (в разделе «Настройки»> «Дополнительно»), вы можете открыть Safari на своем рабочем столе и перейти в «Разработчик»> «Симулятор iPhone» и проверить веб-сайт, который вы загрузили на тренажер. Я сделал это и просто просмотрел исходный код, пока не обнаружил, что мета-теги отличаются от iOS. –

+0

Хорошо, я получил. Я никогда не делал этого раньше, поэтому не думал, чтобы открыть Safari на своем рабочем столе, чтобы посмотреть что-то в совершенно другой программе. Я новичок в Xcode. Спасибо за помощь. –