How to manage different devices resolutions?

ionic-v1
1

Hi guys,

I’m trying to work with one resolution and than use the body zoom to adapt the page to the different screen resolutions.

For example if my art board is 1080x1920 and I’m on a device with 375x627 (iPhone 6) I’ll set the zoom factor and the webkitTextSizeAdjust to 0.34, like this:

var zoom = 0.34;
document.body.style.zoom=zoom;
document.body.style.webkitTextSizeAdjust = "" + (zoom * 100) + "%";

This technique worked until a couple of months ago but with the last ionic version something changed. The scroll view overwrites the webkitTextSizeAdjust and mess everything up. For not scrolling content it works perfectly.

Am I missing something? Should I add some more javascript to manage scroll views or do you have a different solution to manage different screens resolutions?

Thank you in advance

2

try to add “!important” after your webkitTextSizeAdjust value:

document.body.style.webkitTextSizeAdjust = (zoom * 100) + "% !important";
2 Likes
3

I would prefer to use css Media query for displaying different style. But if you want to use webkitTextSizeAdjust, yes try to add !important

@media(max-width:900px){}
4

I tried these solutions but have not worked, I did not understand why even with “!important” was still overridden by the class .scroll so I made two changes and now it works:

  1. document.body.style.webkitTextSizeAdjust seems not work anymore and so I used this method to overwrite the property

    document.body.setAttribute(“style”, “zoom: “+zoom+”; -webkit-text-size-adjust: “+(zoom*100)+”% !important;”);

  2. Ionic .scroll overwrite the text-size-adjust property so I commented the row where the property is overwritten in the files www/lib/ionic/scss/_reset.scss and www/lib/ionic/scss/_scaffolding.scss

It works fine now and adapts to any resolution.

Thank you for your help :wink: