верстка под мобильные устройства шириной 320px

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем sitecreator, 15 фев 2013.

  1. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    Стоит задача сверстать сайт чуть ли не под все мыслимые устройства, т. е. под планшеты и телефоны в том числе.

    Возник первым делом вопрос: а под какие браузеры верстать? Что под такое (320px) разрешение по ширине наиболее популярно среди браузеров?

    И как тестировать?
    Например, шаблон под телефон на андроиде.
    Что использовать на Windows для эмуляции и тестов?
     
  2. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    342
    Симпатии:
    640
  3. zek24

    zek24

    Регистрация:
    10 ноя 2012
    Сообщения:
    161
    Симпатии:
    23
    Прочитайте про адаптивный дизайн
    А тестировать можно тут

     
  4. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    вчера потестировал mobione studio, точнее ее триальную версию.

    собственно из всей этой сборки для меня полезен лишь test center, т.е. сам эмулятор телефона/планшета.
    т. к. разрабатывать в этой studio ничего не буду.

    mobione интересен тем, что позволяет эмулировать тачскрин.
    Я так понимаю, что еще можно и разные браузеры тестировать, предварительно установив их на виртуальный "девайс".

    есть ли аналоги данного эмулятора?
     
  5. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    Есть куча разных эмуляторов, андроида, отдельно оперы и почти всего чего душа пожелает :Smile:
    Проще всего использовать firefox (или хром), можно подменить user-agent дополнениями, и перейти в режим адаптивного дизайна - ctrl+shift+m.
     
  6. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    вот с кучей эмуляторов как быть?
    есть ли бесплатные?
    я пока нашел только платный mobi one.

    посоветуйте аналогичный, пожалуйста, если знаете.
     
  7. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    У меня просто девайс 320х480 :Smile:
    Android - sdk разработчика, bluestacks и еще какие-то были.
    Еще есть вот такой сайтик, показывает довольно неплохо - http://www.responsinator.com/
     
  8. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    потестировал.
    сразу возник вопрос: а почему ни в одном устройстве не показывается горизонтальная прокрутка? Вертикальная есть.
    как по горизонтали передвигаться то?
     
  9. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    :Smile:))
    Есть обе, просто если смотреть адаптивные сайты - они не должны занимать больше 100% ширины, соответственно прокрутки не должно быть.
     
  10. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    тем более странно.
    смотрел не адаптивные сайты, которые просто по ширине не помещались, но тем не менее, полосы горизонтальной нету.
    а на каких то есть.

    непонятна закономерность.

    http://prntscr.com/tcknv
    видно, что явно не помещается, а прокрутки нет/
    ее принудительно включить нельзя никак?
     
  11. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    Может быть где-то в свойствах стоит html { overflow-x: hidden; }
    В любом случае на мобильных тачевая прокрутка, там полоса нафиг не нужна.
    Если хочет двигать этом "эмуляторе" - можно зажать колесико мышки и водить в нужную сторону )