Follow these steps to scale the UI images of your app with a few lines of JavaScript:
Define a CSS class to mark all the images you want to handle according to the device pixel ratio.
<img class='highRes' />
Create a script able to get all the images marked with the previously defined class and change their width according to the pixel ratio.
function processImages(){ var pixelRatio = window.devicePixelRatio; if(window.devicePixelRatio > 1) { var matches = document.querySelectorAll("img.highRes"); for(var i = 0; i < matches.length; i++) { matches[i].width = (matches[i].width / pixelRatio); } }
Run the script when the page is loaded or when the
deviceready
event is fired. When using PhoneGap, it is strongly recommended that the code that needs to run at startup is executed immediately after thedeviceready
event.addEventListener('deviceready', onDeviceReady); function onDeviceReady(evt...