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

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

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

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

Ответ 1

Что вы хотите, это проверить плотность пикселей устройства - измеряется в DPI - поскольку @Smamatti уже упоминал, что вы управляете этим с помощью мультимедийных запросов CSS.

Здесь статья о том, как справляться с различными DPI и размерами экрана, используя эти запросы в формате CSS.

UPDATE: здесь функция 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);
}

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

Ответ 2

Эта проблема сложная.

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

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

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

Если вы используете тег meta 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-устройства задача становится практически невозможной.

Решение идет Native.

На 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 и my Objective-C и методов. В JavaScript мне просто нужно позвонить:

window.shellApp.isTabletDevice();

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

Ответ 3

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

Ответ 4

Я искал все и нашел много решений наполовину. Это работает на Android, iphone и в Интернете. В CSS используйте значения для масштабирования пропорционально.

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);