Нещодавно мій друг зв’язався зі мною, щоб попросити про допомогу щодо сайту WordPress, який він створив за допомогою теми X. Його клієнт зателефонував йому того ранку, коли він помітив, що його веб-сайт відображається неправильно на його iPhone. Нік перевірив це сам, і, звичайно, прекрасний чуйний дизайн, який він розробив, вже не працював.
Крім того, його містифікував той факт, що коли він змінив розмір вікна браузера на робочому столі, на сайті було чуйний, але на його iPhone відображалася лише настільна версія. Навіщо сайт? чуйний на настільному комп’ютері і не реагує на мобільний пристрій?
Чому адаптивний дизайн не працює
Адаптивний дизайн перестає працювати, коли в заголовку файлу HTML відсутній один рядок коду. Якщо цей єдиний рядок коду відсутній, ваші iPhone, Android та інші мобільні пристрої вважатимуть, що веб-сайт, який ви переглядаєте, є повнорозмірним веб-сайтом для робочого столу, і налаштовує область огляду щоб охопити весь екран.
Що ви маєте на увазі під оглядом та розміром огляду?
На всіх пристроях розмір області перегляду відноситься до розміру області веб-сторінки, яку в даний момент бачить користувач. Уявіть, що ви тримаєте iPhone 5 шириною 320 пікселів. Якщо явно не сказано інше, iPhones припускають, що кожен веб-сайт, який ви відвідуєте, є веб-сайтом для настільних ПК шириною 980 пікселів.
Тепер, використовуючи ваш уявний iPhone 5,ви відвідуєте веб-сайт, розроблений для настільних ПК, шириною 800 пікселів. Він не має адаптивного макета, тому ваш iPhone відображає повноформатну версію для робочого столу.
iphone 8 плюс чорний екран
Але iPhone 5 має ширину лише 320 пікселів. Чи не завжди це розмір області перегляду?
Ні це не так. З розміром області перегляду, може брати участь масштабування . IPhone повинен зменшити масштаб, щоб побачити версію веб-сторінки у повній ширині. Пам’ятайте, що область перегляду відноситься до області сторінки, яку в даний момент бачить користувач. На даний момент користувач iPhone бачить лише 320 пікселів сторінки, або бачить повну ширину версії?
Правильно: вони бачать веб-сторінку на всю ширину на своєму дисплеї, оскільки iPhone припустив, що це поведінка за замовчуванням: вона зменшена, щоб користувач міг переглянути веб-сторінку шириною до 980 пікселів. Отже, область перегляду iPhone становить 980 пікселів.
Під час збільшення або зменшення розміру області перегляду змінюється. Раніше ми вже говорили, що наш уявний веб-сайт має ширину 800 пікселів, тож якщо ви хочете збільшити свій iPhone так, щоб краї веб-сайту торкалися країв дисплея вашого iPhone, область перегляду становила 800 пікселів. IPhone може мають область перегляду 320 пікселів на веб-сайті для настільних ПК, але якби це сталося, ви бачили б лише невелику частину.
як підключитися до itunes, коли ipad вимкнено
Мій адаптивний веб-сайт зламаний. Як це виправити?
Відповіддю є один рядок 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 раптом знову почнуть працювати, і мобільна версія вашого веб-сайту оживе. Дякую за читання, і я сподіваюся, що це допоможе!
Пам’ятайте, що Payette Forward,
Девід П.