Как правильно верстать мобильную версию сайта?

Question

[rhost]

Подскажите пожалуйста, как правильно верстать мобильную версию сайта.
Мне не понятно надо ли растягивать сайт на всю ширину как например m.habrahabr.ru или же можно делать фиксированный размер (640px)

Answer 1

[Денис Инешин]

Перед тем как вообще делать что-то для мобильных устройств, ретина экранов и прочего, разберитесь с предметом. Вот отличная статья: habrahabr.ru/post/237931

Comments

[rhost]

Ну, сейчас маленько не это нужно)

Answer 2

[Михаил Лялин]

https://developers.google.com/webmasters/mobile-si...

Comments

[rhost]

Что-то я там не нашел, надо ли делать так чтобы сайт тянулся на всю ширину экрана или же можно одному диву задать ширину 640px и указать

[rhost]

< meta name="viewport" content="width=640, initial-scale=1" >

Answer 3

[Никита]

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

С тем что меньше 640 может доставить много хлопот, начиная шрифтами и заканчивая размерами блоков.

Comments

[rhost]

Сейчас два разных сайта один на site.ru m.site.ru и дизайн разный собственно. Мне не понятно как лучше и правильней сделать, обязательно ли надо тянуть мобильный сайт на всю ширину или же можно создать на странице див который будет все оборачивать задать ему ширину в 640px и в метатеги закинуть < meta name="viewport" content="width=640, initial-scale=1" >

[Никита]

Роман: большой симент мобильного трафика с планшетов, будет плохо если на айпаде будет сайт довольно "большой"

[rhost]

Никита: для планшетов буду отображать обычный сайт, но пользователь может зайти на мобильную версию как с телефона так и планшета\компьютера

[Никита]

Роман: если сайт на планшете будет смотреться адекватно, то почему бы и нет, как написано в гугле, чем более удобен сайт для мобильного устройства, тем больше вы соберете бонусов за поведенческие факторы )

[rhost]

Никита: ну, с обычной версией все понятно, а нормально ли если чуловек зайдет с компа на мобильную версию и увидит примерно такую ширину сайта codepen.io/anon/pen/VLjGvW

[Никита]

Роман: если зайдет на мобильную версию сайта c компьютера то пойдет, но надо стараться перенаправлять его на обычную версию сайта. Но я все таки придерживаюсь точки зрения, что дизайн должен быть адаптивный. Без разделения на несколько доменов. Даже тот же тостер посмотрите, как шикарно и удобно с адаптивностью

[rhost]

Никита: да, согласен что нужен один домен и адаптивный дизайн но не я рисую его) Какие могут быть проблемы если указать фиксированный вьюпорт ?

[Никита]

Роман: например при строгом указании вьюпорта 640, на планшетах 10' сайт будет довольно крупный, пожалуй это единственная проблема

Answer 4

[Алексей Зуев]

Я думаю правильнее будет использовать стандартный

<meta content="width=device-width, initial-scale=1" name="viewport">

Не под все мобильные устройства подойдет 640. Почитайте про то, как работает viewport. Задав 640px, Вы тем самым уменьшите изображение на телефоне с шириной 320px.
И Вы же уже наверно проштудировали большинство сайтов с отдельной мобильной версией и посмотрели, какой у них вьюпорт.

Comments

[rhost]

Да, очень много мобильных сайтов посмотрел и везде стоит такой или почти такой вьюпорт и везде все тянется. А какие могут быть проблемы если допустим указать фиксированный вьюпорт?

[Алексей Зуев]

Ну всё познается на практике, создайте тестовую страницу и поставьте вьюпорт 10px и вьюпорт 10000px, откройте хром и эмуляция мобильных устройств и посмотрите

[Алексей Зуев]

Исходя из этого сделайте вывод: если указать вьюпорт 640, а устройство шириной больше 640, то будет не особо красивое растяжение. И еще frontender.com.ua/mobile-web/wtf-viewport

[Алексей Зуев]

Ну а если указать 640 и открыть в мобильном с шириной экрана 320px, то будет уменьшенная версия

[rhost]

Алексей Зуев: ну да, то есть если установить фиксированную ширину то все будет скейлиться

Answer 5

[Дмитрий Шинкарь]

Более 50% всех смартфонов в мире на данный момент, имеют диагональ больше 4"