Сайт не корректно отображается на ноутбуке, как быть?

Question

[SCG13]

Всем добрый день! Сверстал сайт на bootstrap 4, проверил адаптивность в google chrome и все вроде классно, но у клиента на ноутбуке он отображается не так как у меня при этом же разрешении. Перепробовал все что только мог придумать, прописал кучу медиа, вообщем крутил его как мог, но увы, результата нет, подскажите как быть?
его разрешение 1366*768
meatbutik.ru

Comments

[SCG13]

У клиента он отображается со шрифтом много больше, чем у меня, но с масштабом все в порядке

[Владислав Лысков]

SCG13, вот я смотрю сайт с ноутбука 1366*768, как ты думаешь, откуда я знаю, как он далжен выглядеть?

[Олег]

Может у клиента на ноуте XP ? Тогда версия хрома там очень старая.
И еще бывает, что принудительно ограничен минимальный размер шрифта снизу.
т.е. самые мелкие буквы выводятся 14 - 17 шрифтом.

Напишите версии операционной системы и в каких броузерах смотрели с версиями.

[SCG13]

должен отображаться на высоту всего экрана, а у него кнопка уезжает вниз

[SCG13]

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

[Владислав Лысков]

SCG13, у меня так

[SCG13]

Владислав Лысков, печаль какая, а гугл показывает все норм. Как быть?
У Вас меню полноценное, а у него складывается в мобильную версию, хотя это должно происходить при ширине меньше 1200, в чем может быть причина?

[Олег]

Windows 7 на фотографии.
настройки DPI и масштабирование на уровне операционной системы проверьте.
броузер считает что ширина меньше < 960px . т.е. где то 142 % увеличивается.
Буду смеяться, если реальное значение 146.

Очевидную вещь забыли.
А реальное разрешение экрана в системе какое ? точно как у матрицы ?

Проверил сейчас. Меню у вас схлопывается на ширине 1280.
А это мне напоминает одно из стандартных разрешений экрана ;)

[SCG13]

Олег Муравейко, в системе стоит 1366*768
может прописать что-нибудь в коде, чтобы браузер отображал так как нужно страницу?

[Олег]

<script>alert(screen.width+' x '+screen.height)</script>

начните с этого. Если выведет 1366 на 768 , то я сильно удивлюсь.

[semki096]

А кеш браузера чистили?

[SCG13]

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

[semki096]

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

[SCG13]

Обычный шрифт open sans, у него отображается все крупнее, меню переходит в мобильную версию, хотя должно отображаться полностью, галерея перестраивается под md, а должна быть lg, Просто я не как не могу понять под какое разрешение писать настройки

[Александр Маргинал]

А сейчас я побуду ванной и предположу что у вас разве ос. На аиндовс все всегда не так в любом браузере

[SCG13]

конечно, множество раз

Answer 1

[tyzberd]

у меня на ноуте с высотой экрана в 768px 100vh это 657px. Вы забываете, что на экране есть панель задач, а у браузера вкладки, адресная строка, у некоторых еще закладки.
vh, vw это для моб норм ипользовать.
Пропишите пару точек c min-height, даже с теми же vh, но без heigth, хоть ломаться не будет.
И padding у .head и .head2 уберите

@media screen and (max-height: 768px) {
	header {
		height: 100vh;
	}
	.head {
		 padding-top: 30px; 
	}
	.head2 {
		padding-top: 60px;
	}
}

будет так https://habrastorage.org/webt/02/vv/7x/02vv7xqbumh...

Comments

[SCG13]

хорошо, с высотой понял, но почему при 1366 ширине, у него меню как у 1200 и меньше?

[tyzberd]

у меня меню норм

[SCG13]

tyzberd, я прошу прощения за глупый вопрос, но чтобы добиться результата, как у Вас. мне нужно убрать из медиа 768px .head и .head2?

[tyzberd]

да, еще тут поменял на min-height а с медиа убрал https://habrastorage.org/webt/02/vv/7x/02vv7xqbumh...

[tyzberd]

флексами можно вообще так сделать https://drive.google.com/file/d/1CCJLdqTlWC62Gasex...

[SCG13]

tyzberd, здорово, а как так сделать?

Answer 2

[rPman]

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

Answer 3

[Олег]

настройки DPI и масштабирование на уровне операционной системы проверьте.
Граница бутстрап сетки для типа small 960px.
броузер считает что ширина меньше, т.е. где то в 142 % увеличивается.

Очевидную вещь забыли.
А реальное разрешение экрана в системе какое ? точно как у матрицы ?

Проверил сейчас. Меню у вас схлопывается на ширине 1280.
А это мне напоминает одно из стандартных разрешений экрана ;)