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

Тема в разделе "Мегафлуд", создана пользователем danneo, 10 апр 2015.

  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    Есть конкретные вопросы:
    1. нашел в инете различные разрешения для различных устройств. Есть планшеты, с экраном, как у ноутбука. А значит, верстается не под устройство, как таковое, а под разрешение. Правильно?
    2. как верстать по маленькие разрешения, например, для смартфона. Как отобразить результат верстки для проверки? Не смартфон же постоянно смотреть? Экран нужно как-то уменьшить, я так понимаю?
     
  2. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    319
    Симпатии:
    107
    1. Да.
    2. Вам лучше не спрашивать как, а поискать специализированную литературу по адаптивной вёрстке, т.к. метериала много.
    Сеществуют специальные расширения для браузеров, я пользуюсь Responsive Web Design Tester для Opera, но также рекомендую приложение Responsive WebSite Tester для хрома.
     
    Последнее редактирование: 10 апр 2015
    latteo и danneo нравится это.
  3. Iga

    Iga Постоялец

    Регистр.:
    12 янв 2014
    Сообщения:
    139
    Симпатии:
    17
  4. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    Дак через это правило и верстается. Вопрос в другом, как посмотреть результат верстки на конкретном устройстве
     
  5. Леонид1981

    Леонид1981 Писатель

    Заблокирован
    Регистр.:
    5 апр 2014
    Сообщения:
    8
    Симпатии:
    13
    Зажимаешь кнопочку Ctrl + колесико мышки {вверх-вниз} и так наглядно поймешь, как твой ДИЗ играет с разрешением. Если при увеличении диз сползает и корявится, то значит не адаптировал, или адаптировал но криво.
    А вообще пропиши с помощью CSS правила на отображение по размеру экрана. Правда размеры фиксированные получатся, но как вариант. Знаю что можно загнать и под 320х480. Вообще, можешь у Cotonti подглядеть, у них как раз так скрипт фриланса реализован.

    А по хорошему конечно, надо писать новый шаб, с адаптацией под тач. Или просто заверни свой сайт в .apk и под остальные платформы и не парься.
     
    Последнее редактирование модератором: 10 апр 2015
  6. xoxmo

    xoxmo Постоялец

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

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

    тут видео и скриншоты, правда, на английском.
     
    latteo и ultra нравится это.
  7. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    195
    Симпатии:
    269
    советчики блд, унёс во флуд :D
     
    nizulko и Seregammx нравится это.
  8. Леонид1981

    Леонид1981 Писатель

    Заблокирован
    Регистр.:
    5 апр 2014
    Сообщения:
    8
    Симпатии:
    13
    Да наверное её уже и закрыть моно. Все уже разжевали и в рот положили.
     
  9. BaNru

    BaNru Постоялец

    Регистр.:
    20 ноя 2008
    Сообщения:
    126
    Симпатии:
    52
    В дополнение:
    в FireFox тоже есть такое, хотя значительно проще
    CTRL+SHIFT+M (если клавиши не переназначили)
    Или Инструменты -> Веб-разработка -> Адаптивный дизайн

    В IE10 тоже есть, в инструментах разработчика.
     
    danneo нравится это.