Мобильный интернет: как получить физический размер пикселя?

Question

Я создаю веб-приложение, используя jQuery Mobile и PhoneGap. Есть график, и если пользователь использует большой экран, я хотел бы отобразить больше точек на этом графике, потому что точки являются накладными и не должны быть слишком близко (физически).

Например: если у кого-то есть iPhone, я хочу отобразить N точек на линейном графике. Если у него есть iPad, я хочу отображать 2xN точек (потому что у iPad физически больший экран), но если у него есть какой-то более новый телефон Android, который физически мал, как iPhone, но имеет экран с большим количеством пикселей (как iPad), я хочу отобразить N точек, потому что точки физически малы (и ближе друг к другу).

Так есть ли способ получить эти данные? Альтернативой является определение, является ли устройство планшетом.

Answer 1

Этот вопрос сложный.

Вы можете узнать разрешение экрана вашего устройства в JavaScript, используя screen.width и screen.height, точно так же, как на рабочем столе.

Однако на мобильном устройстве 1 CSSпиксель не обязательно будет иметь пропорцию 1: 1 с пикселем физического экрана.Допустим, ваш screen.width возвращает значение 640 пикселей.Если вы добавите баннер шириной ровно 640 пикселей, он, скорее всего, будет превышать доступную ширину экрана вашего телефона.

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

Если вы используете мета-тег viewport, вы можете установить масштабный коэффициент вашего viewport равнымсоотношение 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 вы можете использовать код в следующей теме, чтобы выяснить, работает ли ваше приложение на большом экране:

Планшет или телефон - 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();

И мой код работает и выглядит красиво на любом размере экрана.

Answer 2

Вам нужно проверить плотность пикселей устройства - измеренную в 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);
}

Надеюсь, это поможет!

Answer 3

Я искал по всему и нашел много половинных решений.Это работает на 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);

Answer 4

посмотрите в window.devicePixelRatio