Не правильное отображение сайта на разрешении 1920?

Question

[winner07]

Привет всем. Сверстал макет, winner07.zzz.com.ua/catalog-auth.html нарисован под разрешение 1920, в главной области при этом разрешении должно быть в ряд 4 товара, у меня в разных эмуляторах так и есть. Клиент проверяет у него только 3, у других устройств он смотрел так же, попросил чтоб в консоли ввел команду window.outerWidth для определения разрешения монитора показало 1536 пикселов вместо 1920, соответственно сайт не правильно показывается как будто на меньшем мониторе. Почему так, что за проблема? Макет и скрин сайта от клиента прикрепил

Comments

[mypage_89]

Параметры - Персонализация - В поиске "Параметры экрана" - и изменение размера текста, приложений и других элементов пусть поставят 100%

Answer 1

[Dmitry Tallmange]

Потому что разрешение экрана клиента 1536х768

Comments

[winner07]

он показывал скрин настроек разрешения, стоит 1920

[Dmitry Tallmange]

winner07: вставьте присланный клиентом скрин в фотошоп и посмотрите размер. Видно же, что даже соотношение сторон другое.

Answer 2

[Павел]

Пускай нажмет Ctrl и покрутит колесико мыши, возможно у него стоит в браузере нестандартный масштаб

Comments

[winner07]

тоже делал так, на 80% показывается как надо, значит на 100% стоит 1536

[Павел]

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

Answer 3

[dom1n1k]

Масштаб увеличенный у клиента настроен.
Это кстати вполне нормальное явление и не должно ломать верстку.

Comments

[Antony Bark]

Если всё так как описано(мало вероятно), и масштаб в браузере не влияет, то остаётся изменение размера системного шрифта, то тут скорее всего вы правы.

Answer 4

[Froggyweb]

sketchapp.me/podrobno-o-plotnosti-pikselej-v-dizaj...

Отправить клиенту для ознакомления ежли шибка вумны

Answer 5

[ivananufriew]

Скажи пожалуйста, а как ты сделал такой интересный эффект при клике на кнопку купить ? буду очень благодарен.

Comments

[Kovalsky]

Вообще-то немного некорректно в ответе на вопрос задавать свой вопрос о вопросе (лол), но всё же:

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
		<defs>
			<filter id="filter-ripple-1">
				<feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/ripple.png" x="-204" y="-280" width="600" height="600" result="ripple"></feImage>
				<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="0" result="dm"></feDisplacementMap>
				<feComposite operator="in" in2="ripple"></feComposite>
				<feComposite in2="SourceGraphic"></feComposite>
			</filter>
		</defs>
	</svg>

CSS

.btn.filter {
  -webkit-filter: url(#filter-ripple-1);
  filter: url(#filter-ripple-1);
}

JS

$(".btn").click(function(e){
		var turb = document.querySelectorAll('#filter-ripple-1 feImage')[0];
		var dm = document.querySelectorAll('#filter-ripple-1 feDisplacementMap')[0];

		$(".btn").removeClass("filter");
		$(this).addClass("filter");

		TweenLite.set(turb, { attr: { x: e.offsetX, y: e.offsetY, width: 0, height: 0 } });
		TweenLite.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });
		TweenLite.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });
	});

[ivananufriew]

благодарю
P.S извиняюсь, что задал вопрос в неположенном месте )

Answer 6

[Islam Ibakaev]

в хроме ctrl + shift + J -> ctrl + shift + M -> вбиваем в эмулятор 1920 X 1080 (клиенту скажи)

offtop: сам придумал эффект при клике на "Купить"? Если посмотрел в какой-то статье или блоге - дай плиз ссылку)