hỗ trợ nhiều độ phân giải và mật độ của hình ảnh trong phonegap

Question

Tôi mới dùng điện thoại và gặp sự cố, tôi đang tạo ứng dụng trên điện thoại sẽ chạy trên nhiều thiết bị nền tảng có kích thước màn hình khác nhau và độ phân giải màn hình khác nhau nên tôi phải tải hình ảnh độ phân giải khác nhau tùy thuộc vào độ phân giải màn hình.

Điều này có thể đạt được trong android bằng cách đơn giản đặt hình ảnh có độ phân giải khác nhau trong thư mục hdpi, mdpi và ldpi và nó (android) tự động tải hình ảnh tùy thuộc vào độ phân giải màn hình thiết bị. Nhưng làm thế nào để làm điều này trong phonegap.

Tôi đã thấy rất nhiều bài viết về thiết kế web đáp ứng mà tất cả họ đều nói về định vị các yếu tố trên trang web nhưng không ai trong số họ đã nói về cách đặt hình ảnh trên cơ sở độ phân giải màn hình.

cảm ơn tôi đã thăng tiến.

câu hỏi đã chỉnh sửa

tôi đã sử dụng mã sau đây cho 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> 

bây giờ tôi có hình ảnh bên trong thư mục tài sản/www/hình ảnh. thư mục này bao gồm 2 hình ảnh có cùng độ phân giải app_logo.png và company_logo.png và 2 hình ảnh có độ phân giải cao hơn app_logo_big.png và company_logo_big.png ngay bây giờ thông qua các truy vấn phương tiện, tôi sẽ biết kích thước màn hình và áp dụng kiểu nhưng theo tôi biết không thể thay đổi img src từ css. Vì vậy, bây giờ làm thế nào tôi sẽ sử dụng những hình ảnh có độ phân giải khác nhau

Answer 1

Sau đó tự động thay đổi ảnh bằng 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'); 
    } 
} 

Qua CSS: Sử dụng Media Queri es cho Nghị quyết khác nhau:

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

Nếu bạn muốn lọc qua,

ĐỊNH HƯỚNG - and (orientation: landscape)

Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Ví dụ:

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

Answer 2

Tạo hỗ trợ cho nhiều kích thước hơn là một vấn đề, nhưng bạn có thể sửa nó bằng @media queries trong CSS. Kiểm tra mã mẫu này:

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

Với mã này bạn có thể thêm hỗ trợ cho tất cả các thiết bị. Check this link for getting more code for more browsers

Chức năng mà bạn có thể sử dụng:

• Chiều rộng và chiều cao: (min-device-width : 768px) and (max-device-width : 1024px)
• Định hướng: (orientation: landscape) hoặc (orientation: portrait)
• Device điểm ảnh tỷ lệ: (-webkit-device-pixel-ratio: 1.5)

EDIT:

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> 

Thay đổi img vào span và thêm 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); 
    } 
} 

Với ví dụ này, bạn có thể thay đổi mã của bạn và sửa chữa nó. Hy vọng điều này giúp đỡ!

Answer 3

Tôi nghĩ rằng bạn phải phân chia các kích thước màn hình báo cáo của mật độ màn hình để có được chiều rộng và chiều cao kích thước phương tiện truyền thông truy vấn.

Answer 4

Bạn cũng có thể làm điều này bằng cách sử dụng helper handlebars, mà mã ít hơn thâm canh và theo ý kiến ​​của tôi phương pháp đề nghị:

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


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

khi img/low/ và img/high chứa hình ảnh ở độ phân giải khác nhau có cùng tên.

Sau đó, trong mẫu của bạn:

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

Tất nhiên, bạn phải thiết lập các giá trị kích thước màn hình theo các thiết bị mục tiêu ứng dụng của bạn.

Phụ lục: Nếu bạn không có 1: 1 bản đồ điểm ảnh trong trình duyệt cordova (mà không phải là đề nghị - hình ảnh của bạn sẽ có một cái nhìn mờ/unsharp) screen.width sẽ khác với các trình duyệt chiều rộng (window.innerWidth) và bạn phải sử dụng $(window).width() hoặc window.innerWidth. Bạn có thể sửa lỗi ánh xạ sai bằng truy vấn phương tiện.

Answer 5

Tôi thấy rằng tôi phải bắt đầu thêm hỗ trợ cho tỷ lệ pixel là 0,5, 1, 1,3, 1,5, 2 và 3 bằng các truy vấn phương tiện này.

Lưu ý Tôi đang sử dụng tỷ lệ -webkit-min-device-pixel-tỷ lệ thay vì -webkit-device-pixel-ratio. Tôi đã tìm thấy rằng trên một trong các thiết bị thử nghiệm của tôi (Galaxy Tab 3 - 8 ") tỷ lệ pixel là 1,3 và không chọn bất kỳ kiểu dáng cụ thể nào mà tôi đã đặt trong ứng dụng phonegap của mình.

@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/bigstart@2x.png') 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/bigstart@2x.png') 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/bigstart@2x.png') 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/bigstart@3x.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
}