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

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

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

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

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

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

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

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

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

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

Если вы используете тег meta viewport, вы можете установить коэффициент масштабирования вашего windows просмотра в соотношении 1: 1, установив его значение ширины на значение ширины устройства, например:

  

Теперь этот баннер размером 640 пикселей будет точно соответствовать вашему 640-пиксельному экрану.

К сожалению, с этого момента, насколько мне известно, нет реального способа рассказать фактический размер физического экрана (как в дюймах или мм) устройства, отображающего ваш веб-контент. По крайней мере, не в JavaScript. Хотя браузер может получить доступ к некоторой полезной информации, такой как device.name или device.platform, вы не можете определить, сколько дюймов или мм эти 640 пикселей представляют, если вы заранее не знаете измерения экрана данного устройства.

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

Конечно, вы могли бы с помощью screen.width и window.devicePixelRatio узнать, работаете ли вы, скажем, на сетчатке iPhone или iPad 2, но когда вы начинаете рассматривать множество разрешений экрана и плотность пикселей на устройствах Android, задача становится почти невозможной.

Решение идет коренным образом.

На Android вы можете использовать код в следующем streamе, чтобы выяснить, работает ли ваше приложение на большом экране:

Планшет или телефон – Android

Затем вы можете использовать код в этом другом streamе для запроса вашего приложения-оболочки из 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(); 

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

загляните в window.devicePixelRatio

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

Обновление: теперь я использую что-то ближе к этому. Он работает в большем количестве случаев. Соотношение изменяется в зависимости от проекта и ориентации. И я использую class на теге body, который изменит CSS.

   var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50; var unitsWideThatIWantToBuildThisProjectTo = 30; var landscape = isLandscape(); var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo; var font = Math.round(width / ratio); 
Давайте будем гением компьютера.