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