Почему, когда экран моего рабочего стола и экран мобильного устройства имеют одинаковое разрешение, они не отображают одно и то же?

Например, на моем рабочем столе просматривается одна из моих кнопок шириной 50 пикселей, похоже, что она занимает около 5% экрана, как и ожидалось. Но при просмотре на моем Android-устройстве с тем же разрешением по горизонтали кажется, что он занимает около 15%.

Может ли кто-нибудь объяснить, почему это так и что я могу сделать, чтобы остановить это?


person ChrisInCambo    schedule 10.04.2013    source источник


Ответы (1)


Разные дисплеи имеют разный размер пикселей. Вы слышите, что это называется DPI или точками на дюйм, что физически означает количество пикселей на дюйм. В вашем случае ваш рабочий стол имеет меньшие пиксели, чем ваше устройство Android (более высокий DPI), поэтому 50 пикселей занимают меньше физического места.

Это можно исправить, указав физический размер, например cm или in. Ознакомьтесь с спецификацией.

person Fls'Zen    schedule 10.04.2013
comment
Обновлен ответ, чтобы указать, что может сделать спрашивающий, чтобы получить физический размер из CSS. - person Fls'Zen; 10.04.2013
comment
Спасибо за ответ. Понятный размер пикселя, но, например, на обоих экранах доступно 1000 пикселей по горизонтали, а элемент имеет ширину 100 пикселей, он все равно должен занимать 10% доступного пространства экрана независимо от размера пикселя. Или я что-то упускаю? - person ChrisInCambo; 10.04.2013
comment
Коэффициент масштабирования может способствовать неправильному масштабированию. Как настольные, так и мобильные устройства позволяют пользователям увеличивать или уменьшать масштаб веб-страниц, поэтому вполне возможно, что на одном из них или на обоих отображается масштабированный контент. - person Fls'Zen; 10.04.2013