Мобильный интернет: как получить физический размер пикселя?
Я создаю веб-приложение, используя jQuery Mobile и PhoneGap. Есть график, и если пользователь использует большой экран, я хотел бы отобразить больше точек на этом графике, потому что точки являются накладными и не должны быть слишком близко (физически).
Например: если у кого-то есть iPhone, я хочу отобразить N точек на линейном графике. Если у него есть iPad, я хочу отображать 2xN точек (потому что у iPad физически больше экран), но если у него есть какой-то более новый телефон Android, который физически мал, как iPhone, но имеет экран с большим количеством пикселей (как iPad), я хочу отобразить N точек, потому что точки физически малы (и ближе друг к другу).
Так есть ли способ получить эти данные? Альтернативой является определение, является ли устройство планшетом.
5 ответов
Вам нужно проверить плотность пикселей устройства - измеренную в DPI - как уже упоминалось @Smamatti, вы управляете этим с помощью медиазапросов CSS.
Вот статья о том, как справиться с различными DPI и размерами экрана с помощью этих медиазапросов CSS.
ОБНОВЛЕНИЕ: вот функция javascript (из ссылки выше), которая использует трюк, чтобы выяснить текущее DPI устройства:
function getPPI(){
// create an empty element
var div = document.createElement("div");
// give it an absolute size of one inch
div.style.width="1in";
// append it to the body
var body = document.getElementsByTagName("body")[0];
body.appendChild(div);
// read the computed width
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
// remove it again
body.removeChild(div);
// and return the value
return parseFloat(ppi);
}
Надеюсь это поможет!
Этот вопрос сложный.
Вы можете узнать разрешение экрана вашего устройства в JavaScript, используя screen.width и screen.height, как на рабочем столе.
Однако на мобильном устройстве 1 пиксель CSS не обязательно будет иметь пропорцию 1: 1 с пикселем физического экрана. Допустим, ваш screen.width возвращает значение 640 пикселей. Если вы добавите баннер шириной ровно 640 пикселей, он, скорее всего, будет соответствовать доступной ширине экрана вашего телефона.
Причиной этого является то, что производители мобильных устройств устанавливают область просмотра устройства по умолчанию для другого масштабного коэффициента, чем экран вашего устройства. Таким образом, содержимое веб-страниц, которые не были разработаны специально для мобильных устройств, все равно будет выглядеть разборчивым без необходимости масштабирования.
Если вы используете мета-тег окна просмотра, вы можете установить коэффициент масштабирования вашего окна просмотра в соотношении 1: 1, установив для его значения ширины значение ширины устройства, например, так:
<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />
Теперь этот баннер размером 640 пикселей поместится точно на экране размером 640 пикселей.
К сожалению, на данный момент, насколько мне известно, нет никакого реального способа узнать фактический физический размер экрана (в дюймах или мм) устройства, отображающего ваш веб-контент. По крайней мере, не в JavaScript. Хотя браузер может получить доступ к некоторой полезной информации, такой как device.name или device.platform, вы не можете сказать, сколько дюймов или мм представляют эти 640 пикселей, если вы не знаете заранее измерения экрана данного устройства.
Для меня совершенно очевидно, почему кому-то нужна версия приложения для небольших экранов телефонов, а другая - для более крупных экранов планшетов. Маленькие кнопки, например. Иногда они настолько близко друг к другу, что твой палец покрывал бы два сразу. В то же время вы не хотели бы, чтобы эти толстые кнопки, предназначенные для мобильных экранов, отображались на хорошем 10-дюймовом планшете.
Конечно, вы можете с помощью screen.width и window.devicePixelRatio выяснить, работаете ли вы, скажем, на сетчатке iPhone или iPad 2, но когда вы начнете учитывать множество разрешений экрана и плотности пикселей на устройствах Android, задача становится почти невозможной.
Решение идет родной.
На Android вы можете использовать код в следующем потоке, чтобы выяснить, работает ли ваше приложение на большом экране:
Затем вы можете использовать код в этом другом потоке для запроса вашего приложения-оболочки из JavaScript, используя PhoneGap:
Связь между Android Java и PhoneGap Javascript?
С Apple это еще проще:
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
//running on an iPad
}
else {
//iPhone or iPod
}
И если вы используете одно и то же соглашение об именах для своих объектов Android и Apple, ваш код по-прежнему будет универсальным, в чем и заключается весь смысл PhoneGap. Например, в моем случае я использовал одинаковые имена для моих объектов Java и объектов Objective-C и методов. В JavaScript мне просто нужно позвонить:
window.shellApp.isTabletDevice();
И мой код работает и выглядит красиво на любом экране.
Я искал повсюду и нашел много половинных решений. Это работает на Android, Iphone и в Интернете. В вашем CSS используйте значения rem для пропорционального масштабирования.
var dpi = window.devicePixelRatio || 1;
var width = $(window).width();
var ratio = 52; //Ratio of target font size to screen width screenWidth/idealFontSize
var font = Math.ceil((width / dpi / ratio)+dpi*3);
if(font < 15)
font = 15;// any less is not useable.
$("html").css({"fontSize": font});
Обновление: теперь я использую что-то ближе к этому. Это работает в большем количестве случаев. Соотношение меняется в зависимости от проекта и ориентации. И я использую класс для тега body, который изменит CSS.
<body class="landscape">
<body class="portrait">
var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50;
var unitsWideThatIWantToBuildThisProjectTo = 30;
var landscape = isLandscape();
var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo;
var font = Math.round(width / ratio);
Я некоторое время работал над решением для этого и (после МНОГО тестирования) я думаю, что нашел ярлык с помощью математики. Попробуйте: https://www.hyperspaces.co.uk/device/ Мне было бы интересно узнать, работает ли это для вас (используйте ссылку на странице). Код в настоящее время запутан, а домен заблокирован во время бета-тестирования.