I tried to develop an mobile app using HTML5 on Intel SDK. The app is quite ok on my old mobile phone a Samsung 6 years old. But on my actual phone which is an Nexus 5 the app has the font too small and the images are too small, as well. So, I started to a lot of documentation on internet and I had to accumulate a lot of frustration with it. Nothing to help me, indeed. A lot of solutions consisting in modifying css to build 2 or 3 files for css just to increase the font when you have high density of pixels as for Retina display.
But, some of the solutions were with
viewport solution. But most of them haven't work for me.
And, after 3 day research I found something that helped me.
This page helped me:
http://ariya.ofilabs.com/2011/08/mobile-web-logical-pixel-vs-physical-pixel.html
But they have something wrong in their code. So, I had to modify this to work well for me.
For Android, we apply the density DPI approach and now it becomes:
Here I had to modify like this:
2 maximum-scale=2 user-scalable=no”>
And, also, I had to use this javascript function at onLoad body:
function schimbaPixelii(){
var el, width, height;
if (window.devicePixelRatio === 1) {
if (window.innerWidth === 2 * screen.width ||
window.innerWidth === 2 * screen.height) {
el = document.getElementById('viewport');
el.setAttribute('content', 'width=device-width, target-densityDpi=device-dpi ' +
'initial-scale=1, maximum-scale=1, user-scalable=no');
document.head.appendChild(el);
width = window.innerWidth;
height = window.innerHeight;
if (width === 2 * screen.width) {
width /= 2;
height /= 2;
}
}
}
}
