Покрокова інструкція найпростішої адаптації сайтів для мобільних пристроїв з урахуванням рекомендацій Google і автоматизації всього процесу.
Нагадаю, що Google враховує всього чотири складові адаптації сайту під мобільні пристрої:
Крок 1: скачайте архів mobilefriendly.zip за цим посиланням.
Крок 2: в секції
... вкажіть метатег viewport:Крок 3: розархівуйте і завантажте на сервер файл mob-style.css.
Примітка. mob-style.css це найпростіша таблиця стилів, яка враховує ряд перерахованих вище рекомендацій Google. Вона робить посилання кнопками, таблиці рядками, картинки гумовими, списки строковими і багато іншого. При необхідності, ви завжди можете підправити її так, як вам це потрібно.
Скрипт перевіряє, чи є браузер мобільним чи ні. Якщо так, він відключить в HTML-документі всі таблиці стилів і додасть mob-style.css.
Примітка. для link.href ви повинні прописати шлях до свого файлу mob-style.css.
"Крок 4: перед закриває тегом body"
може правильніше "Крок 4: перед закриває тегом head"?
а точно на онлоад уваги не звернув.
таке питання ще з'явився. вирішив спробувати на декількох сайтах для експерименту. в тесті гугла тепер все ок по цих сайтів в плані мобайл-френдлі.
а ось хочу перевірити як воно буде виглядати в житті, але саме зараз нічого немає з гаджетів для перевірки, щоб побачити, як все виглядає. почав в інеті дивитися сайти, де генеруються скріншоти під різні дозволи, але практично скрізь видає посвідки зі стандартною таблицею стилів. можете підкажете, який-небудь ресурс для цієї справи?
// if (! (/ Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i.test (navigator.userAgent))) return;
Тоді можна буде подивитися на робочому столі, а при необхідності скористатися і Toggle device mode в інструментах розробника браузера. або самому масштабувати вікно браузера.
ОК зрозумів.
спасибі, зараз буду дивитися.
mob-style.css завантажувати на WP в папку шаблону?
2cergei kutuzoy куди завгодно, просто пропишіть його URL в link.href
Мені не допомогло. Закачав файл в корінь сайту. Пробував і link.href = 'mob-style.css'; і так link.href = '/mob-style.css';
Підкажіть в чому може бути справа?
2Tatyana Krivonos скрипт відключає наявні таблиці стилів і підключає mob-style.css тільки якщо ви переглядаєте сайт з мобільного пристрою, в інших випадках він цього не робить.
Спасибі Костя. Працює. Геніально. Поділюся трафіком.
Костянтин здрастуйте. А немає що подібного для блогів блогспот. Я маю на увазі картинки гумовими, посилання кнопками. Тег viewport у мене давно вставлений. В цілому блог проходить перевірку щодо оптимізації для мобільних 99/100. Але сторінки з фонами, готовими рамками І.Т. д результат гірше нікуди. На деяких зменшила розмір зображень, але все одно перевірку не проходять. Хоч удаляй сторінки, що ще зробити не знаю.
Костя, цей варінт я знаю, навіть статтю написала по оптимізації для мобільних блогів блогспот. Шаблони підбирала, поки не вибрала більш вдалий. Вибір шаблону дуже впливає на перевірку в PageSpeed. Але ось з картинками питання не вирішене. Спасибі за відповідь.
2Olga Protasova звичайно треба допілівать шаблон або використовувати той що є, тут простого рішення немає. На рахунок карінок все просто. Додайте в css таке правило:
Зазвичай для змісту статті використовується CSS-клас post-body, якщо інший треба використовувати його. Саме ж властивість max-width: 100% говорить браузеру, що картинка не може бути ширше ширини батьківського елементу і автоматично підганяє під нього розмір картинки.
Костянтин, рядок додала, але при перевірці в програмі поки результат нульовий, може треба час. У мене ще таке питання: як включити кеш браузера за рекомендацією програми. Пишуть, що не вказано або закінчується дата. Намагалася знайти інформацію в інтернеті, але знайшла тільки для блогів на WordPress. У blogspot можна що-небудь зробити?
Olga Protasova не плутайте окреме рішення з комплексом завдань, треба розглядати конкретну проблему. Я перевірив www.ozarabotkevceti.ru там все начебто нормально. Навіть не знаю до чого там картинки, але зайвим наведене мною рішення не буде.
З кешуванням на сторонніх ресурсах ви нічого не зробите.
Костянтин, в блозі, що Ви перевірили помилок немає при перевірці в програмі, і в інструментах для веб-майстрів гугл немає жодної сторінки з помилками. Блог www.bdblogov.ru ось тут 7 сторінок з помилками, хоча в цілому я вже писала перевірку блог пройшов на відмінно.
2Ельза Пан Варіант рішення не самий універсальний. О не може врахувати всіх особливостей верстки. Зазвичай меню роблять через UL LI списки і в цьому випадку все нормально. Але варто відзначити, що може вийти досить великий список, треба буде підключати надбудову для «мобілізації» меню. Але це треба робити вже самому.
Спасибі величезне, єдиний нормальний сайт з дійсно потужним варіантом (перелопатив весь інет)