it-swarm.dev

obsługa wielu rozdzielczości i dużych obrazów w zakresie telefonicznym

Jestem nowicjuszem w zakresie połączeń telefonicznych i napotykam na problem. Tworzę aplikację mapowania połączeń, która będzie działać na wielu platformach o różnej wielkości ekranu i różnej rozdzielczości ekranu, więc muszę ładować obrazy o różnej rozdzielczości w zależności od rozdzielczości ekranu.

można to osiągnąć w Androidzie, po prostu umieszczając zdjęcia o różnej rozdzielczości w hdpi, mdpi i folderze ldpi, a to (Android) automatycznie pobiera obrazy w zależności od rozdzielczości ekranu urządzenia. Ale jak to zrobić w połączeniu telefonicznym.

Widziałem wiele artykułów na temat responsywnego projektowania stron internetowych, które wszyscy mówią o pozycjonowaniu elementów na stronie internetowej, ale żaden z nich nie powiedział o tym, jak umieszczać obrazy na podstawie rozdzielczości ekranu.

dzięki idę do przodu.

edytowane pytanie

użyłem następującego kodu dla 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>

teraz mam obrazy w folderze assets/www/pictures. ten folder składa się z 2 obrazów o tej samej rozdzielczości app_logo.png i company_logo.png oraz 2 obrazów o wyższej rozdzielczości app_logo_big.png i company_logo_big.png teraz poprzez zapytania o media poznam rozmiar ekranu i zastosuję style, ale o ile wiem, ja nie można zmienić img src z css. Więc jak teraz użyję tych obrazów o różnej rozdzielczości

20
prateek

Następnie Dynamicznie Zmień Obraz poprzez 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');  
  }
}

Poprzez CSS: Używaj zapytań o media dla różnych rozdzielczości:

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

Jeśli chcesz filtrować,

ORIENTATION - and (orientation: landscape)

Urządzenie WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Przykład:

@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 */
}
28
Rishi Php

Tworzenie obsługi większej liczby rozmiarów jest problemem, ale możesz to naprawić za pomocą zapytań @media w CSS. Sprawdź ten przykładowy kod:

/* 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 */
}

Za pomocą tego kodu możesz dodać obsługę wszystkich urządzeń. Sprawdź ten link, aby uzyskać więcej kodu dla większej liczby przeglądarek

Funkcje, których możesz użyć:

  • Szerokość i wysokość: (min-device-width : 768px) and (max-device-width : 1024px)
  • Orientacja: (orientation: landscape) lub (orientation: portrait)
  • Stosunek pikseli urządzenia: (-webkit-device-pixel-ratio: 1.5)

EDYTOWAĆ:

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>

Zmień img na span i dodaj ID.

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

W tym przykładzie możesz zmienić swój kod i naprawić go. Mam nadzieję, że to pomoże!

3

Możesz to również zrobić za pomocą pomocnika kierownica , który wymaga mniej kodu i moim zdaniem zalecana metoda:

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


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

podczas gdy img/low/ i img/high zawierają obrazy w różnych rozdzielczościach o tej samej nazwie.

Następnie w swoim szablonie:

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

Oczywiście musisz ustawić wartości rozmiaru ekranu zgodnie z urządzeniami docelowymi dla Twojej aplikacji.

Dodatek: Jeśli nie masz mapowania pikseli 1: 1 w przeglądarce Cordova (co NIE jest zalecane - twoje obrazy będą rozmyte/wyostrzone) screen.width będzie się różnić od szerokości przeglądarki (window.innerWidth) i musisz użyć $(window).width() lub window.innerWidth. Naprawienie błędnego mapowania może być możliwe przy użyciu zapytań o media.

3
biodiv

Znalazłem, że muszę zacząć dodawać obsługę proporcji pikseli 0,5, 1, 1,3, 1,5, 2 i 3, używając tych zapytań o media.

Uwaga: Używam -webkit-min-device-pixel-ratio zamiast -webkit-device-pixel-ratio . Odkryłem, że na jednym z moich urządzeń testowych (Galaxy Tab 3 - 8 ") stosunek pikseli był 1.3 i nie odbierał żadnego ze specyficznych stylów, które ustawiłem w mojej aplikacji phonegap. 

@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;
    }   
}
1

Myślę, że musisz podzielić wymiary ekranu według gęstości ekranu, aby uzyskać szerokość i wysokość zapytania o media.

0
Steven Benjamin