Верстка на 20% крупнее в ФФ и Хроме

nikki4 · August 22, 2017

Открываю psd макет, беру линейку. Измеряю какой-либо элемент, например высоту шапки.

Прописываю высоту в пикселях и т.д. Но все едет и кажется огромным.

Делаю принтскрин, вставляю поверх psd макета, видно что высота стала гораздо больше, например шапка 400px а в принтскрине уже 500px.

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

Может искажается при принскрине размеры? но проверил по ширине - вместо 1920 - 1900 за счетполосы прокрутки. Так что не могло прям на 100 пикселей пропасть, да и сам реально вижу, что все выглядит крупнее в браузерах.

Ничего не понимаю..

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

хром и ФФ укрупняют на 20%

или вот вставляю картинку шириной 1920px (мой экран 1920)

в итоге картинка гораздо больше на экране и целиком не влезает в экран.

Отправил файл с html+css

У меня это отображается так:

Скрытый текст

html+css:

Скрытый текст


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">.header {height:100px; background:coral;}</div>
		<div class="banner"></div>

</body>
</html>


.header {height:100px; background:coral;}

.banner{
height:521px; 
max-height:100%; 
width:100%; 
max-width:1920px;
background-image:url("3foto.jpg");
}

test.rar

Edited August 22, 2017 by nikki4

kattiperk · August 22, 2017

А reset для стилей делали? Например, padding подкрался у элемента.

Igor Schnaider · August 22, 2017

Через инспектор размеры проверяйте, а не скриншотами. Либо масштабируйте пропорционально оригинал с результатом.

p.s. На ретине, например, размеры будут в ×2 раза больше. Т. е. 100px в фотошопе станут 200px.

nikki4 · August 22, 2017

Ну понятно что инспектором проверять надо, а не скринами. В то то и дело в css и инспекторе одно, а на экране другое. Я не поверил инспектору и решил проверить скринами.

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

https://goo.gl/K3F6AG

Но на самом деле в хроме и лисе одно, а в яндексе другое. В яндексе нормальный размер, в ФФ и хроме - увеличено все примерно на 20%.

Может у меня настройки браузера какие-то.. типа автоувеличение.. но жму масштаб 100%.. ничего не меняется.

Но в любом случае из-за такого верстать не удобно.. может как-то отключить можно.

Edited August 22, 2017 by nikki4

kattiperk · August 22, 2017

100px

http://joxi.ru/1A59OwzSnRve4A

nikki4 · August 23, 2017

В 22.08.2017 в 17:05, kattiperk сказал:

100px

http://joxi.ru/1A59OwzSnRve4A

да так и есть. файрбаг тоже показывает 100 высота.

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

Делаю принскрин, вставляю в фотошоп и что видим? Вот я вижу, что браузеры увеличивают все на 20%.. но где это отключить, чтобы нормально все верстать.

Скрытый текст

Edited August 23, 2017 by nikki4

kattiperk · August 26, 2017

Меня пугает то, что ты присылаешь. Это магия какая-то. Или проверь единицы измерения в ФШ - по умолчанию не всегда пиксели. Или делая скрин что-то ломается, при условии, что инспектором в браузере показывает 100px.

Edited August 26, 2017 by kattiperk

Sign In

Верстка на 20% крупнее в ФФ и Хроме

Question

nikki4

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

kattiperk

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

nikki4

Link to comment

Share on other sites

kattiperk

Link to comment

Share on other sites

nikki4

Link to comment

Share on other sites

kattiperk

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information