Hi guys!
So, I don’t have any idea why my app when run in ionic serve --lab and when implemented in android device looks different. Look at these pictures below.
Anyone can help?
What attributes do I have to fix (in code) for those apps to look the same?
My Android device is LG Nexus 5 btw.
Ionic serve run in Firefox. I’m using Mac.
Seems to be a scaling issue. Ionic serve lab probably has a higher resolution, which better fits your design. Play around with the scaling of your app for other resolutions as well.
So, is there any scaling attribute which I can change immediately or I still have to play around the css to fix that scaling issue?
Probably the image is the biggest scaling issue. You can try and give it a maximum height relative to the viewport.
Sorry, I don’t get it. Can you give me an example? The viewport of the device?
Just off the top of my head…
Have a function in your class…
imageHeight(){
return Math.floor( (document.documentElement.clientHeight / 100.00) * 30);
//will give you 30% of the screen, maybe you need it to be less...
}
Then on your img…
<img [height]="imageHeight()" alt="" src="wherever.png" />
The image is pushing the other content down. On a smaller device, the text is pushed out of your view. The image is probably the reason everything get’s pushed down, so you should reduce the maximum height of the image so it won’t push down the content when the image becomes to large on a small screen. One way would be the one suggested by @codiqa100031834, another one is just give the image a css class width max-height: 30vh as property.
Thank you for being very clear, sir. Much appreciated!
That’s why I like coming to these sites…
luukschoen has a better answer - less coding.