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;
}
}
}
}
No comments:
Post a Comment