Клиент проверяет верстку при масштабе меньше 100% правомерно ли это и чем ему помочь, если да?

Question

[HelpSophie]

Верстаю для клиента сайт.
Ширина - фиксированная.

1. Клиент уменьшает размер страницы и говорит, например, что меню теперь не влезает на одну строчку.

2. Есть блоки masonry, которые при уменьшении масштаба, а потом при быстром увеличении обратно наползают друг на друга. Лично мне удалось добиться такого эффекта только при полной загрузке оперативки, возможно дело не в этом.

Правомерны ли требования клиента, что при уменьшении масштаба все должно оставаться на своих местах?
И если да, то как или за счет чего, каких свойств мне ему помочь?

UPD:
Я может, не правильно выразилась.
Например, требовать кроссбраузерность для современных браузеров минус несколько версий - это оправданное желание.
Требовать отображение в раритетах типа ИЕ8 - оправданное, отдельно обговариваемое.

Вопрос в том, есть ли аргументы, которые бы оправдали проверку поведения при зуме (причем таком, капитальном зуме)?

Людей, которые ставят увеличенный шрифт или используют увеличенный масштаб, я встречала и понимаю. Уменьшенный до 50% - нет, не видела и в голову не приходит толковых идей зачем бы это понадобилось.

lukoshko.spb.ru/1/index1.htm

Скрины:

spoiler

Comments

[xfg]

а в чем проблема? всё зумится хорошо.

[HelpSophie]

xfg: добавила скрины

[Kovalsky]

HelpSophie: а при чем тут правомерность. Если он хочет адаптивность, то нужна адаптивность. Если он хочет другое поведение верстки при зуме, то нужно другое поведение верстки при зуме. Стандартные отношения клиент-исполнитель. Другое дело, что с его стороны было идиотизмом рассчитывать на то, что вы прочитаете его мысли и сделаете как он хочет.

[HelpSophie]

Никита Полевой:Я может, не правильно выразилась.
Например, требовать кроссбраузерность для современных браузеров минус несколько версий - это оправданное желание.
Требовать отображение в раритетах типа ИЕ8 - оправданное, отдельно обговариваемое.

Вопрос в том, есть ли аргументы, которые бы оправдали проверку поведения при зуме (причем таком, капитальном зуме)?

Людей, которые ставят увеличенный шрифт или используют увеличенный масштаб, я встречала и понимаю. Уменьшенный до 50% - нет, не видела и в голову не приходит толковых идей зачем бы это понадобилось.

[Kovalsky]

HelpSophie, я с вами абсолютно согласен. Думаю, на всей планете всего три человека когда-либо увидят ваш сайт в 30%ном зуме: заказчик, вы и человек, который случайно нажал на Ctrl пока листал сайт.

Мне кажется, профита от этого никакого. Не лезу в ваши дела, но мне кажется вам стоит выдвинуть в отношении этой идеи мнение как специалист и как наемный работник: сказать что это 1) не было оговорено, 2) это неоправданное усложнение верстки, с учётом того, что 3) никто никогда не посмотрит сайт в таком зуме.

[tema_sun]

Offtop: для иконок в красном меню, ну и вообще для подобных вещей, лучше использовать один спрайт со всеми картинками и позиционировать их через background. Тогда у вас будет только один http запрос для всех ваших картинок. И не будет ситуации, когда при первом :hover иконка на мгновение исчезает.

[HelpSophie]

tema_sun: действительно оффтоп, да еще и банальный. А учитывая, что 5 из них входят в awesome...

[tema_sun]

HelpSophie: ну тем не менее все они подключены отдельными .png и мерцают при первом :hover

[HelpSophie]

tema_sun: не волнуйтесь, в продакшен его никто в таком виде не отдаст

Answer 1

[krumza]

Не знаю насколько уместно мое мнение. но имхо заказчик просто хочет увидеть уменьшенную копию на своем смартфоне.
Предлагаю решение.
1. С помощью js отслеживать масштаб

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

Код Отсюда
2. Для уровней масштаба править тихонечко стили
например для вашего .header1-1 nav a достаточно text-transform и margin-left: убрать

Answer 2

[iBird Rose]

как я понял верстка не адаптивная. тогда сделайте для body min-width той фиксированной ширины для которой вы верстали.

Comments

[HelpSophie]

не могу, там есть полосы с фоном на всю ширину окна, а контейнер с содержимым фиксированный

[HelpSophie]

iBird Rose добавила ссылку в вопрос

[iBird Rose]

HelpSophie: советую meta viewport юзать с параметрами width=device-width, initial-scale=1, а так все нормально у вас с версткой. конечно же фиксированная верстка не будет входить в окно, если ее уменьшать. или заказчик от вас хотел адаптивную верстку или он чего то не понимает. или вы друг друга недопоняли

[HelpSophie]

iBird Rose: он не хотел адаптивную верстку
meta viewport не проявило никакого действия на десктопе

добавила скрины в вопрос

[HelpSophie]

iBird Rose:
width=device-width, initial-scale=1
не подходит для фиксированной ширины, для адаптива - да, несомненно так

в данном случае получается горизонтальная прокрутка в 2 (+/-) раза

Answer 3

[Kote]

добрый день,
можно посмотреть пример?

навскидку - включите масштабирование страницы просто напросто в метатегах, как было в эпоху до адаптивной верстки. Все везде влезет и страница будет "зумиться"

Comments

[HelpSophie]

это какой мета Вы имеете в виду?

[HelpSophie]

Kote добавила ссылку в вопрос

[Kote]

а у вас все замечательно, и работает как надо при масштабировании - как воспроизвести баг?

[Kote]

насколько я понял, при уменьшении масштаба "не хватает" длины красной полоски в шапке, бека самой шапки? это единственный нюанс и он легко поправим.

[HelpSophie]

Kote: в шапке при <30% сползает менюшка, на других страницах есть аналогичные проблемы. Думаю, если придумаю как решить для этой проблемы, то и остальные решу.

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

[Kote]

body:not(.main-page) .header {background-size: cover;} + убрать для .wrapper макс ширину + прописать

[HelpSophie]

Kote: а про все замечательно, я тоже считаю, что там все нормально, а колесиком масштабировать до 30% это перебор
:)

[Kote]

приложите скриншот пожалуйста, у меня не сползает :)

[Владимир]

HelpSophie: вообще адаптивная верстка по другому проверяется. Может человек не знает? А на счет масштаба, на будущее четко прописывайте в контракте что поддерживаете а что нет.

[HelpSophie]

Kote: вставила скрины

[HelpSophie]

Владимир: верстка не адаптивная

Если честно, мне даже в голову не приходило обговаривать масштабирование до 30%

Понятно, что я могу закапризничать и сказать, что это уже перебор и ничего не делать.
Но, если есть вариант решить эту проблему, то почему бы не сделать хорошо.

[Kote]

позиция заказчика неадекватная, мне просто уже интересно вам помочь

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

ваша "проблема" в том, что хром берет ваши заданные рамки крапа в пикселях, их сжимает - пропорционально, а вот с текстом, вероятно, есть некоторые пороговые минимальные значения..

идея рабочая может быть в том, чтобы использовался ограничения максимального размера шины макет в %% либо vw юнитах. Они превосходно отрабатывают в хроме - я проверил, прежде чем писать.

но! проблема с мансори, он зараза не пересчитывается и у меня нет опыта работы с ним - возможно, там можно задать ширину колонок в % ? это решит все вопросы.

[Kote]

* чертова автокоррекция убила слова) ; врапа, ширины и тд..

[Kote]

+ гуглятся решения дждаваскриптовые по запрету зума в браузере) заказчик отложит кирпичей )))))

[HelpSophie]

Kote: да, я так и сказала, что самое адекватное решение в данном случае - запретить вообще зум.

Вроде уговорила, что так сайты не смотрят.

Но теперь же самой интересно :)

Answer 4

[Андрей Верх]

Вы бы скрины проблем сделали, чтоб было понятно.

По поводу меню, у меня ничего не вылезает, но конечно, задавать фиксированные рамзеры в пикселях, это не есть хорошо. Тем более вы флексбокс юзаете.

Зачем макс.ширину ограничиваете, тоже не ясно.

Масонри, при изменение размеров окна, можно обновить reloadItems вроде именно за это отвечает. В вашем случае, можно вообще обойтись чистым CSS — columns: 3 300px;

Comments

[HelpSophie]

до 30% уменьшите

В смысле зачем пиксели для фиксированной ширины контейнера? Вы бы в чем делали?

Максимальную ширину ограничиваю, потому что имею такие макеты и такое задание. Если я ее не ограничу, то выйдет мягко говоря некрасиво.

[Андрей Верх]

HelpSophie: Разумеется уменьшал. Браузер FF. Именно поэтому нужно скрины давать или точные сведения бага, чтою его воспроизвести. Скорее всего тут имеют место быть особенности масштабирования в браузере.

Задавать высоту, там где это не требуется - плохо. Изменится кол-во контента и ваш код будет неработоспособным. Например для .menu вы задаёте высоту, хотя можно задать padding. Для пунктов меню, опять же достаточно max-height...

От того что уберёте max-width: 1920px;, станет только лучше, ибо на 1920 пикселях, мир не заканчивается.

[HelpSophie]

Андрей Верх: добавила скрины

[HelpSophie]

Андрей Верх: в шапке есть фоновая картинка, с ней как поступить при экране шире 1920?

[Андрей Верх]

А, вы про другое меню...А почему там не используете flex? Уберёте margin и ничего вылезать не будет, а будет пространство уменьшаться при необходимости.

[Андрей Верх]

По поводу текста, заказчик не прав. Так как это не проблема вёрстки. Для чего вообще такой "кейс", нужен кроме проверки, не знаю. Попросите клиента сказать для чего это требование и если что, сошлитесь на то что это изначально было не оговорено.

HelpSophie: background-size:cover

[HelpSophie]

Андрей Верх: background-size:cover все таки оно ограничено здравым смыслом, а не бесконечно. И если конкретно этой картинке в шапке по большому счету все равно, то есть и другие.
В данном случае это головная боль дизайнера. Поскольку попросили к этому PixelPerfect :)))))))

[HelpSophie]

Андрей Верх: Про margin: опять таки, исторически заказчик хотел Pixel Perfect (какое к нему имеет отношение масштабирование браузера до 30% я уже не знаю). Так вот этот самый PP проще всего достигается жесткими размерами. И сначала он принимал отдельно шапку, поэтому там нет флексов.

Еще я боюсь, что 30-ю %% тоже может не ограничится, можно же и в 10 пытаться уместиться.

[HelpSophie]

Андрей Верх: а reloadItems это в какое место в моем случае надо попытаться вставить?

[Kovalsky]

HelpSophie: по поводу pixel perfect: вероятно клиент хотел чтобы при зуме масштабы всех элементов изменялись в одинаковой степени. Как например при зуме картинки.

[HelpSophie]

Никита Полевой: и как это реализовать? Это кроме вопроса "зачем" ))

[Kovalsky]

HelpSophie: Только что проверил, проблему с масонри решает .masonry('layout'). Надо повесить дополнительный пересчет по ресайзу, но не на каждый шаг, а когда ресайз закончится. Как - в интернетах найдете способы.

Как - не знаю.

Answer 5

[dom1n1k]

Вообще, конечно, проверять верстку в режиме 33% (на этой отметке у меня меню складывается в Хроме) как бы странно и бесполезно. Обычно люди увеличивают страницы. Уменьшать - ну ещё понимаю 70-90%, но точно не 33%.
Однако же этот как будто бы туповатый тест выявил проблемы в верстке. Я не смотрел всё, но пресловутое меню точно сверстано плохо и ненадежно. Его ширина никак не задана и ни от чего не зависит. По сути, блок nav просто распирается набором ссылок. Ещё там есть flex-контейнеры, но у дочерних элементов никак не заданы flex-basis, grow, shrink и вот это всё. Как это должно работать?
При каких-то условиях ссылки решили сложиться - ну и почему бы нет? Им верстальщик толком не заложил их поведение, браузер волен делать что хочет.

Comments

[HelpSophie]

>блок nav просто распирается набором ссылок
А куда он денется при фиксированной ширине обертки?
Упрется в края или мешающий другой контент, в данном случае красную рамку, заменяющую логотип (что и происходит при уменьшении до 30%).
То что я задам ему фиксированную ширину ничего не изменит, разве что, если клиент надумает переименовать какой-то пункт и он станет длиннее на 2 буквы, то ему придется лезть в стили и эту фиксированную ширину увеличивать.

>Ещё там есть flex-контейнеры, но у дочерних элементов никак не заданы flex-basis, grow, shrink и вот это всё.
Вы же не задаете обычным div'ам ширину 100%?
Поэтому - ровно также, как работают все не заданные свойства - по умолчанию. Которое в данном случае меня полностью устраивает.

>Им верстальщик толком не заложил их поведение, браузер волен делать что хочет.

Как задавать поведение при зуме? Можно пример? Для какого-то одного свойства в блоке, например, для пропорционального уменьшения шрифта?

Answer 6

[Сергей ZSA]

FireFox 2 варианта - 50% и 30% у кого там и что куда плывёт я честно говоря не знаю и какой больной человек будет работать с таким масштабом - без понятия. Мне при 50% плохо видно, а о 30% говорить вообще нечего... Внушите клиенту, что он требует бред. У меня выходит только когда я говорю прямо человеку, что он псих и требует невменяемых и никому не нужных вещей.


Да, на хроме в 33% есть косяк с неправильным выводом меню. Зачем вам советуют какие-то min-width и тд и тп - я честно не понимаю. Просто убираем у первой ссылки margin-left и при 33% будет всё замечательно (это если ваш клиент реально психованный и хочет чтоб при этом масштабе всё было круто). Если человек будет прикапываться к масштабу в 25% - просто попрощайтесь с ним и всё, я бы не тратил время на такого заказчика.

Comments

[HelpSophie]

Да, ФФ масштабирует четко.

Меню - понятно. Там за счет марджина можно уместить лишнее слово. Но если сжать до 10% (гипотетически), то проблема останется. Т.е. значит, она не в марджинах. Ну и полно еще мест на сайте где такая же петрушка, потому что размеры стоят фиксированные, потому что макет такой. И либо мне придется жертвовать размазыванием фоновых картинок либо оно будет вылезать.

С клиентом мы вроде решили, что это он лишнее придумал.

Но мне же теперь самой интересно, как это решить в рамках текущей верстки. С адаптивными все хорошо, там размерчики относительные и все уменьшится куда надо. А вот с такой...

[Сергей ZSA]

HelpSophie: А вы тостер отмасштабируйте. Меню верхнее едет влево всегда, потому что оно так свёрстано. Ни сайты ни разработчики в 99.9% случаев не предусматривают работы сайта при масштабе меньше 100%. Это просто бессмысленно, потому что уменьшением масштаба крайне редко пользуются (обычно когда прямо очень дискомфортно смотреть в другом масштабе, но это делает очень маленькое количество людей и они заведомо понимают, что сайт из-за этого будет выглядеть иначе).