Мой друг недавно связался со мной, чтобы попросить помощи с сайтом WordPress, который он создал с использованием темы X. Его клиент позвонил ему в то утро после того, как заметил, что его веб-сайт некорректно отображается на его iPhone. Ник проверил это сам, и, конечно же, красивый адаптивный дизайн, который он разработал, больше не работал.
Его еще больше озадачил тот факт, что, когда он изменил размер окна браузера на своем рабочем столе, сайт стал отзывчивым, но на его iPhone отображалась только настольная версия. Почему сайт должен реагировать на настольные компьютеры и не реагировать на мобильные устройства?
Почему адаптивный дизайн не работает
Отзывчивый дизайн перестает работать, если в заголовке HTML-файла отсутствует одна строка кода. Если эта единственная строка кода отсутствует, ваш iPhone, Android и другие мобильные устройства будут считать, что просматриваемый вами веб-сайт является полноразмерным настольным сайтом, и отрегулируют размер viewport. , чтобы охватить весь экран.
Что вы подразумеваете под областью просмотра и размером области просмотра?
На всех устройствах размер области просмотра относится к размеру области веб-страницы, которая в данный момент видна пользователю. Представьте, что вы держите в руках iPhone 5 шириной 320 пикселей. Если явно не указано иное, iPhone предполагает, что каждый веб-сайт, который вы посещаете, является настольным сайтом с шириной 980 пикселей.
Теперь, используя свой воображаемый iPhone 5, вы посещаете веб-сайт, предназначенный для настольных компьютеров и имеющий ширину 800 пикселей. У него нет адаптивного макета, поэтому на вашем iPhone отображается полноразмерная настольная версия.
Нет, это не так. С размером области просмотра может быть задействовано масштабирование. iPhone должен уменьшить масштаб, чтобы увидеть полноэкранную версию веб-страницы. Помните, что область просмотра относится к области страницы, которая в данный момент видна пользователю. Пользователь iPhone в настоящее время видит только 320 пикселей страницы или он видит полноразмерную версию?
Верно: они видят полноразмерную веб-страницу на своем дисплее, потому что iPhone принял ее поведение по умолчанию: она уменьшена, чтобы пользователь мог просматривать веб-страницу шириной до 980 пикселей. Таким образом, окно просмотра iPhone составляет 980 пикселей.
При увеличении или уменьшении масштаба размер окна просмотра изменяется. Ранее мы говорили, что ширина нашего воображаемого веб-сайта составляет 800 пикселей, поэтому, если вы увеличите масштаб своего iPhone так, чтобы края веб-сайта касались краев экрана вашего iPhone, область просмотра будет иметь ширину 800 пикселей. iPhone может иметь область просмотра 320 пикселей на настольном сайте, но если бы это было так, вы бы видели только небольшую ее часть.
Мой адаптивный сайт не работает. Как это исправить?
Ответ — это одна строка HTML, которая при вставке в заголовок веб-страницы указывает устройству установить для области просмотра собственную ширину (320 пикселей в случае iPhone 5), а не масштабировать (или увеличить) страницу.
Для более подробного технического обсуждения всех параметров, связанных с этим метатегом, ознакомьтесь с этой статьей на tutsplus.com.
Как исправить тему WordPress X, если она не отвечает
Назад к моему другу: эта строка кода исчезла, когда он обновил тему X. При исправлении своей имейте в виду, что тема X использует не только один заголовочный файл — она использует разные заголовочные файлы для каждого стека, поэтому вам придется отредактировать свой.
Поскольку Ник использует стек Ethos темы X, ему пришлось добавить строку кода, о которой я упоминал ранее, в файл заголовка, который находился в x /frameworks/views/ethos/wp-header.php . Если вы используете другой стек, замените имя вашего стека (Integrity, Renew и т. д.) на «ethos», чтобы найти правильный заголовочный файл. Вставьте эту строку и вуаля! Готово.
Так что это также исправляет мои медиа-запросы CSS?
Когда вы вставите эту строку в заголовок вашего HTML-файла, ваши адаптивные запросы @media внезапно снова начнут работать, и мобильная версия вашего веб-сайта вернется к жизни. Спасибо за чтение, и я надеюсь, что это поможет!
Не забудьте Пайетт Форвард, Дэвид П.
