скрытое меню

от чего зависит ширина страницы в px

от чего зависит ширина страницы в px

От чего зависит реальный размер символов на экране?

Размер системного шрифта в Операционной системе

В ОС Windows изменяем размер шрифта в системе (допустим ставим 125%) .

фотка 1

Далее в браузере (например FireFox) выводим ширину нашего экрана (js: document.width()) , и видим , что на мониторе 1600*1200 наша ширина примерно 1327.

Соответственно если размер системного шрифта сделать нормальный 100% (а на самом деле для нормальных людей на мониторе 1600*1200 это будет НЕ нормально, а очень мелко), то видим нашу нормальную ширину 1600 px.

Размер шрифта по умолчанию в самом браузере

И еще , что вы думаете о размере шрифта по умолчанию в самом браузере? Например FireFox реально меняет размер текста на странице. Но значение js: document.width() не меняется 1327,

фотка 2

Масштабирование в браузере при помощи зажатой клавиши CTRL и колеса мышки

Тут document.width() меняется вместе с размером текста. Учитывайте также, что отрабатываются media запросы при переходе через пороги размеров экрана.

О себя добавлю

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

2. Никогда не работайте за ноутбуком больше 1 часа в день! Потому-что производители ноутбуков делаю межпиксельную решетку ноутбуков,смартфонов во много раз более толстой чем у Десктопов. Ибо ноутбук предназначен для мобильной кратковременной работы (по мнению самих производителей ноутбуков) и им наплевать если вы работаете больше и сажаете свое зрение (ведь они предупреждали).

Можем ли мы гарантировать реальный размер шрифта у пользователя

Допустим пользователь выбрал мастаб 100% и в ОС и на нашей странице браузера. В настройках браузера пользователь указал 14px - размер шрифта по умолчанию (или чаще всего пользователь не подозревает, что есть такая настройка и что там указано);

Если мы НЕ забудем указать для страницы body{font-size: 12px;} , то картинка будет такая :

фотка 3

А если мы забудем указать для элементов страницы размер в px (или укажем в em), то браузер возьмет размера шрифта , который у него установлен по умолчанию. И для его ,например, 16px текст на странице будет уже крупнее:

фотка 4

Для своего сайта я решил делать так:
Обязательно указывать font-size в px для всех элементов страницы, но для разной ширины страницы width() разные font-size.
что-то в таком духе :

@media screen and (min-width: 2001px) {
	body{
		font-size : 26px;
	}
}

@media screen and (max-width: 2000px) {
	body{
		font-size : 20px;
	}
}

@media screen and (max-width: 1600px) {
	body{
		font-size : 16px;
	}
}

@media screen and (max-width: 1199px) {
	body{
		font-size : 14px;
	}
}
...

И тогда, даже если мы не знаем ,что там пользователь установил в ОС и какой мастшаб в браузере накрутил колесом, мы добьемся ,что при открытии нашей страницы , он будет видеть не слишком мелкий и не слишком крупный, а нормально читаемый текст.

Яндекс.Метрика