HelpSophie
@HelpSophie

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

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

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

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

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

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

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

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

lukoshko.spb.ru/1/index1.htm

Скрины:
spoiler
ac3e434293794980a0b6d2ce8ffab1fc.png1a8eb44cc4f54bbb9261328fd05f6779.pngc10aa9030399488db3a7d8d239893fe2.jpg
  • Вопрос задан
  • 1400 просмотров
Решения вопроса 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: убрать
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
как я понял верстка не адаптивная. тогда сделайте для body min-width той фиксированной ширины для которой вы верстали.
Ответ написан
@kotemedia
Режу
добрый день,
можно посмотреть пример?

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

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

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

Масонри, при изменение размеров окна, можно обновить reloadItems вроде именно за это отвечает. В вашем случае, можно вообще обойтись чистым CSS — columns: 3 300px;
Ответ написан
dom1n1k
@dom1n1k
Вообще, конечно, проверять верстку в режиме 33% (на этой отметке у меня меню складывается в Хроме) как бы странно и бесполезно. Обычно люди увеличивают страницы. Уменьшать - ну ещё понимаю 70-90%, но точно не 33%.
Однако же этот как будто бы туповатый тест выявил проблемы в верстке. Я не смотрел всё, но пресловутое меню точно сверстано плохо и ненадежно. Его ширина никак не задана и ни от чего не зависит. По сути, блок nav просто распирается набором ссылок. Ещё там есть flex-контейнеры, но у дочерних элементов никак не заданы flex-basis, grow, shrink и вот это всё. Как это должно работать?
При каких-то условиях ссылки решили сложиться - ну и почему бы нет? Им верстальщик толком не заложил их поведение, браузер волен делать что хочет.
Ответ написан
serjikz
@serjikz
web-developer
FireFox 2 варианта - 50% и 30% у кого там и что куда плывёт я честно говоря не знаю и какой больной человек будет работать с таким масштабом - без понятия. Мне при 50% плохо видно, а о 30% говорить вообще нечего... Внушите клиенту, что он требует бред. У меня выходит только когда я говорю прямо человеку, что он псих и требует невменяемых и никому не нужных вещей.
4eda52a3bb1842ef9fdf2e5ce38d8642.png0f0a271f8b3d4788b686e57f19ed2e25.png

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы