Поддержка множественного разрешения и плотности изображений в телефонной зазоре

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

это может быть достигнуто в android, просто поместив ваши изображения с разным разрешением в hdpi, mdpi и ldpi, и он (android) автоматически извлекает изображения в зависимости от разрешения экрана устройства. Но как это сделать в телефонном разговоре.

Я видел много статей о гибком веб-дизайне, они все говорят о размещении элементов на веб-странице, но не о них рассказали о том, как размещать изображения на основе разрешений экрана.

Спасибо, я заранее.

отредактированный вопрос

Я использовал следующий код для html

<div id="header" data-role="header" data-position="fixed">
 <img alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left" />
 <img alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right" /><h1></h1>
</div>

теперь у меня есть изображения внутри папки assets/www/pictures. эта папка состоит из двух изображений с таким же разрешением app_logo.png и company_logo.png и двух изображений с более высоким разрешением app_logo_big.png и company_logo_big.png теперь через медиа-запросы я буду знать размер экрана и применять стили, но насколько я знаю, я не может изменить img src из css. Итак, как я буду использовать эти изображения с разным разрешением

Ответы

Ответ 1

Затем динамически изменить изображение через jquery:

HTML:

<div id="header" data-role="header" data-position="fixed">
   <img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>

JavaScript:

$(document).ready(function () {
  if(window.devicePixelRatio == 0.75) {
     $("#app-icon").attr('src', '/images/lpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 1) {
           $("#app-icon").attr('src', '/images/mdi/app-icon.png');  
  }
  else if(window.devicePixelRatio == 1.5) {
     $("#app-icon").attr('src', '/images/hpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 2) {
              $("#app-icon").attr('src', '/images/xpdi/app-icon.png');  
  }
}

Через CSS: используйте Media-запросы для различного разрешения:

HTML:

<div id="header" data-role="header" data-position="fixed">
     <span id="app-icon"></div>
    <span id="brand-icon"></div>
 </div>

CSS

/* Low density (120), mdpi */
@media screen and (-webkit-device-pixel-ratio: 0.75) {
   #app-icon { background-image:url(pictures/ldpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/ldpi/brand-icon.png); }
}

/* Medium density (160), mdpi */
@media screen and (-webkit-device-pixel-ratio: 1) {
   #app-icon { background-image:url(pictures/mpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/mdpi/brand-icon.png); }
}

/* High density (240), hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
   #app-icon { background-image:url(pictures/hdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/hdpi/brand-icon.png); }
}

/* Extra high density (320), xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2) {
   #app-icon { background-image:url(pictures/xdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/xdpi/brand-icon.png); }
}

Если вы хотите выполнить фильтрацию,

ОРИЕНТАЦИЯ - and (orientation: landscape)

Устройство WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Пример:

@media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) {
   /* Your style here */
}

Ответ 2

Создание поддержки для большего количества размеров является проблемой, но вы можете исправить ее с помощью @медиа-запросов в CSS. Проверьте этот пример кода:

/* iPads (landscape) ----------- */
@media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) 
   and (orientation : landscape) {
       /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) 
   and (orientation : portrait) {
       /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
   and (min-width : 1224px) {
       /* Styles */
}

/* Large screens ----------- */
@media only screen 
   and (min-width : 1824px) {
       /* Styles */
}

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

Функции, которые вы можете использовать:

Ширина и высота: (min-device-width : 768px) and (max-device-width : 1024px)
Ориентация: (orientation: landscape) или (orientation: portrait)
Соотношение пикселей устройства: (-webkit-device-pixel-ratio: 1.5)

ИЗМЕНИТЬ

HTML:

<div id="header" data-role="header" data-position="fixed">
 <span id="app_icon" alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left"></span>
 <span id="brand_icon" alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right"></span><h1></h1>
</div>

Измените img на span и добавьте идентификаторы.

CSS

@media screen and (-webkit-device-pixel-ratio: 0.75) {
  #app_icon {
    width: 100px; /* Example size */
    height: 100px; /* Example size */
    background: url(pictures/app_logo_small.png);
  }
}

@media screen and (-webkit-device-pixel-ratio: 1) {
  #app_icon {
    width: 150px; /* Example size */
    height: 150px; /* Example size */
    background: url(pictures/app_logo_medium.png);
  }
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
  #app_icon {
    width: 200px; /* Example size */
    height: 200px; /* Example size */
    background: url(pictures/app_logo_large.png);
  }
}

@media screen and (-webkit-device-pixel-ratio: 2) {
  #app_icon {
    width: 300px; /* Example size */
    height: 300px; /* Example size */
    background: url(pictures/app_logo_xlarge.png);
  }
}

В этом примере вы можете изменить свой код и исправить его. Надеюсь эта помощь!

Ответ 3

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

if (screen.width <= 480) {
    imgFolder = 'img/low/';
}
else {
    imgFolder = 'img/high/';
}


Handlebars.registerHelper('imgFolder', function () {
    return imgFolder
});

while img/low/ и img/high содержат изображения в разных разрешениях с тем же именем.

Затем в вашем шаблоне:

<img src="{{imgFolder}}yourImage.png" />

Конечно, вы должны установить значения размера экрана в соответствии с устройствами, на которые нацелены ваши приложения.

Приложение: Если у вас нет сопоставления пикселей 1:1 в браузере cordova (что НЕ рекомендуется - ваши изображения будут иметь размытый/нерезкий вид) screen.width будет отличаться от ширины браузеров (window.innerWidth), и вы должны использовать $(window).width() или window.innerWidth. Возможно, вы сможете исправить неверное сопоставление, используя медиа-запросы.

Ответ 4

Я нашел, что мне пришлось приступить к добавлению поддержки соотношений пикселей в 0,5, 1, 1,3, 1,5, 2 и 3, используя эти медиа-запросы.

Примечание. Я использую -webkit-min-device-pixel-ratio, а не -webkit-device-pixel-ratio. Я обнаружил, что на одном из моих тестовых устройств (Galaxy Tab 3 - 8) соотношение пикселей было 1,3 и не собирало ни одного из определенных стилей, которые я установил в своем приложении для телефонных разговоров.

@media screen and (-webkit-min-device-pixel-ratio: 0.5) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/bigstart.png') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/bigstart.png') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1.3) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/[email protected]') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/[email protected]') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/[email protected]') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    #app_icon {
        width:64px;
        height:64px;
        background: url('../images/[email protected]') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}

Ответ 5

Думаю, вам нужно разделить измеренные размеры экрана на плотность экрана, чтобы получить ширину и высоту размеров медиа-запросов.