Как правильно отлаживать адаптивную вёрстку?

Question

[Alex Z.]

Как пытаюсь делать сейчас:
при помощи

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
document.write(w + "x" + h);

узнаю размер экрана, в Chrome DevTools создаю устройство с этим размером.
И вроде бы все должно быть хорошо, но по факту, например, на декстопе фон фиксированный, а на реальном девайсе (или при подключении отладки через ADB к нему же) - нет. То есть какие-то правила НЕ срабатывают, хотя вроде бы выглядит всё одинаково.
В итоге не получается сделать нормально даже под свой телефон, Не говоря уже о куче других viewport'ов.

В чём проблема и что делаю не так?

Comments

[nvdfxx]

Если вам нужно адаптировать сайт на кучу вьюпортов, то, либо у вас невероятно сложный сайт, который даже представить тяжело, либо вы что-то неправильно делаете

[Alex Z.]

nvdfxx, собственно, в об этом вопрос и задан. как делать нужно правильно?

[nvdfxx]

Alex Z., 320px - iphone 5s (самый маленький из популярных), 768 - стандартная отсечка для мобилок, 1280, 1366 - ноутбуки, дальше у вас все контейнером скорее всего отсекается, а там уже подгонять, что между этими значениями

Answer 1

[Арсений Матыцин]

Действительно, какая-то дичь. Ежели ты используешь Chrome Devtools, то там есть вывод размера вьюпорта (при эмуляции устройства и если двигать ползунок панели), зачем его скриптом ловить — для меня секрет.

Дальше в комментариях верно отметили про стандартные разрешения — можно взять за референс популярный Bootstrap и повторять его breakpoints до того, как начнешь понимать, что к чему.

Естественно, это не убережет от косяков, ибо да хотя бы пользовательский ввод. Или самое косячное — навигация в шапке. Постоянно с этим сталкиваюсь, особенно при введении новых элементов (сейчас у меня на сайте, к примеру, ни в п... короче ни к месту форма входа, правда ее там никогда и не было). Я к тому, что дизайн в любом случае при некоторых масштабных введениях приходится переделывать. А чтобы максимально избегать провисов между популярными viewport-ами, достаточно осваивать переносы и обрезку контента. Если позволяет условия, конечно.

Например у флексов есть свойство flex-wrap:wrap, а гриды так вообще супер, можно указать минимальный размер для переноса и он будет работать не как в обычных блоках + зависимость от контента. Но, к сожалению это работает по сути только в списках, при верстке специфического контента работают другие условия.

Ну и не забывай, что кроме точек перехода медиазапросов, есть еще и другие свойства, которые можно комбинировать, например ориентация устройства.

PS: чтобы тестировать, как мужик открывай эмулятор и дергай ползунок, прокручивая страницу. Где-то поехало — переделывай). А потом лови лучи боли от IE, в котором забыл оттестировать или Safari на iOS.

PSS: самое малое устройство за базу можешь взять 320 по ширине, а больше 1920. Если шире, то оптимально обернуть в контейнер отцентрированный.