Нещодавно мій друг зв’язався зі мною, щоб попросити допомоги щодо сайту 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 раптово знову почнуть працювати, і мобільна версія вашого веб-сайту повернеться до життя. Дякую за читання, сподіваюся, це допоможе!
Remember to Payette Forward, David P.
