как верстать под планшеты, смартфоны?

D

danneo

Честный
Регистрация
13 Ноя 2007
Сообщения
1.527
Реакции
121
Есть конкретные вопросы:
1. нашел в инете различные разрешения для различных устройств. Есть планшеты, с экраном, как у ноутбука. А значит, верстается не под устройство, как таковое, а под разрешение. Правильно?
2. как верстать по маленькие разрешения, например, для смартфона. Как отобразить результат верстки для проверки? Не смартфон же постоянно смотреть? Экран нужно как-то уменьшить, я так понимаю?
 
1. Да.
2. Вам лучше не спрашивать как, а поискать специализированную литературу по адаптивной вёрстке, т.к. метериала много.
Сеществуют специальные расширения для браузеров, я пользуюсь Responsive Web Design Tester для Opera, но также рекомендую приложение Responsive WebSite Tester для хрома.
 
Последнее редактирование:
Iga написал(а):
Лично мне удобно использовать правило @media.
Для просмотра ссылки Войди или Зарегистрируйся
И на хабре хорошая статья Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Дак через это правило и верстается. Вопрос в другом, как посмотреть результат верстки на конкретном устройстве
 
  • Заблокирован
  • #5
Зажимаешь кнопочку Ctrl + колесико мышки {вверх-вниз} и так наглядно поймешь, как твой ДИЗ играет с разрешением. Если при увеличении диз сползает и корявится, то значит не адаптировал, или адаптировал но криво.
А вообще пропиши с помощью CSS правила на отображение по размеру экрана. Правда размеры фиксированные получатся, но как вариант. Знаю что можно загнать и под 320х480. Вообще, можешь у Cotonti подглядеть, у них как раз так скрипт фриланса реализован.

А по хорошему конечно, надо писать новый шаб, с адаптацией под тач. Или просто заверни свой сайт в .apk и под остальные платформы и не парься.
 
Последнее редактирование модератором:
danneo написал(а):
Дак через это правило и верстается. Вопрос в другом, как посмотреть результат верстки на конкретном устройстве
Нажмите для раскрытия...

в браузере Google Chrome есть встроенная фича: показывает сайт в разных мобильных устройствах (ойфоны, ведроиды, планшеты).
вызывается так:

1. открываем дебаггер хрома, нажав на F12
2. в верхней панельке дебаггера будет иконка типа мобильного телефона (верхняя полоска дебаггера, вторая слева иконка), при наведении на нее пишет Toggle device mode. кликаем на нее
3. выбираем нужный аппарат, жмем рефреш.
4. ...
5. PROFIT!

Для просмотра ссылки Войди или Зарегистрируйся видео и скриншоты, правда, на английском.
 
  • Заблокирован
  • #8
Да наверное её уже и закрыть моно. Все уже разжевали и в рот положили.
 
xoxmo написал(а):
1. открываем дебаггер хрома, нажав на F12
2. в верхней панельке дебаггера будет иконка типа мобильного телефона (верхняя полоска дебаггера, вторая слева иконка), при наведении на нее пишет Toggle device mode. кликаем на нее
3. выбираем нужный аппарат, жмем рефреш.
4. ...
5. PROFIT!
Нажмите для раскрытия...
В дополнение:
в FireFox тоже есть такое, хотя значительно проще
CTRL+SHIFT+M (если клавиши не переназначили)
Или Инструменты -> Веб-разработка -> Адаптивный дизайн

В IE10 тоже есть, в инструментах разработчика.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху