Как сделать мобильную версию для любого сайта
Сначала просто-напросто вставляем шапку эти строчки
|
1 2 3 4 |
<meta name=viewport content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 641px)" href="/style.css" /> <link rel="stylesheet" media="screen and (max-width: 641px)" href="/style-m.css" /> |
Для чего это нужно? Дело в том что 641 ширина экрана iPhone.
потом создаем два файла стилей один для простой версии другой для мобильный которые будут подключаться в зависимости от разрешения экрана.
Вот ссылка на проверку в Гугле https://www.google.com/webmasters/tools/mobile-friendly/.
А еще в браузере Chrome есть такая вкладка инструменты разработчика это можно увидеть свою версию дизайна сайта где то там внизу нарисован на мобильное устройство.
Как сделать файлы стилей я тут не объясняю по любому надо прописать картинкам стиль max-width 100%.
|
1 2 3 4 5 |
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } |
верстаем дизайн вынося Все размеры блоков ширину например в файлы стилей Главная задача чтобы при уменьшении ширины страницы до 320 пикселей все вмешалось.
https://www.dudamobile.com/responsive-website/templates# сервис.
А еще есть плагин Any Mobile Theme Switcher автоматом переключает любую тему.
Метки: мобильная версия