Wrong images scale on device

ionic-v1
1

Hi,

I started the implementation of my application (last step was design) today and I’m facing some problems. First of all, let me briefly explain the look and feel I would like to have.

Given that the interface is complex, I’m starting with the header, which is quite customized:

  • gradient background
  • higher header (70px)
  • centered logo of our company
  • left navigation (with custom color)
  • sometimes right navigation (depending of the view)

[Step 1] I set my custom navigation icon color with the following property (.bar-header .ion-navicon class):

color: #f59549;

[Step 2] I solved the first and second point by overwriting the .bar-header class with the following properties:

background: linear-gradient(to bottom, #fefefe 0%, #dddddd 100%)!important;
border-color: #efefef !important;
height: 70px!important;

[Step 3] Then, I put the logo between the recommanded “<h1 class="title">...</h1>” but it’s weird to have an image in a h1 tag, isn’t it?

[Step 4] The logo was cropped at the bottom because the h1’parent was shorter. So I overwrote the .bar .title class with the following property:

height: 100%!important;

Alright, it looks good on my browser. Let’s test on my Android device (LG G3 running Android 4.4.2).

[Step 5] Damn! The logo is zoomed (+/- x3.386) and pixelated… So I set it the following properties:

max-width: 100%;
max-height: 100%;

I restarted the app and now the proportion is good. But, it seems that every components are zoomed, upscalled:

  • my LG G3 has a 1440*2560px screen
  • the logo’ size is 404*56px
  • the header’ size is 70px

If I take a screenshot on my phone, the logo’ size is 1222*169px (x3.02475248) and the header’ size is 236px (x3.37142857, almost same as the logo before the max-height/width property).

[Questions]
So, my questions are really simple:

  1. Did I do anything wrong? (logo in the h1, gradient…)
  2. I assume that phone upscaling is normal, but how can I guarantee the look and feel of my app across devices?
  3. How to correct the size of my logo/header on my device? (= how to set the upscaling at 2x instead of 3,…x?)

[Ressources]
Codepen exemple: http://codepen.io/anon/pen/VYWwba
Screenshot of the result on my device: http://i.imgur.com/oCAVqd9.png (full res)

I hope you will find this understandable…

Thanks in advance,
Regards

2

For your information, the stock device DPI is 640, the screenshot attached in my previous post is with the DPI set to 540. The following screenshot is with the stock DPI: http://i.imgur.com/ebVXK69.png

Edit: So with the stock DPI the logo is 1180164px(+/- x2,92) instead of 40456px and the header is 280px (height, x4) instead of 70px.

3

I continue my monologue. :slight_smile:

About my first question, I changed the <h1><img ... ></h1> with a <div id="logo"></div> with the following CSS properties:

background: url(...) no-repeat;
width: ...;
height: ...;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto 0;

I added a 400px (still don’t really understand correctly what’s going on with this devices scalling x2 x3 or x4…) max-device-width’ media query (or device-width, don’t remember exactly) which changes the logo for a smaller one. It works pretty well, but now I just need to understand the scale (for example, why my 70px [height] header takes 3 or 4 time his height on my LG G3).

Thanks in advance and have a nice weekend!

4

Try adding this in the <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

I haven’t tested it for your specific case, but it fixed a problem I ran into awhile ago, and it may help with the DPI differences.

Also, when you change the height of the header it will affect the content below it. You’re going to want to modify has-header, as well. See this post:

1 Like
5

So this brings up a good point.

Long story short, by setting the viewport, you shouldn’t have any issue dealing with device pixles, densities, etc.

1 Like
6

Thanks for the advice, I’ll try it next monday.

7

Thank you @mhartington. I searched on Ionic forum, I made hours of search on Google but never found this issue on Github, I’ll check the findings next monday.

Thanks for your help @mhartington and @brandyshea, I’ll keep you informed. :wink:

1 Like
8

Hi!

I think that I understood stuff about device pixels, densities, etc

Thanks for your help!