CODEWITHSUNDEEP
csshtmlmobile
Salman Paracha
Salman Paracha

Reputation: 1703

Why are fixed height/width html elements rendering larger than expected on mobile devices despite high pixel density?

I am trying to build a "mobile first" web app. And in doing so I am using the meta attribute "viewport" to help scale the elements appropriately.

But I want certain elements to be fixed size. For example I want the div below to be 598(h)x450(w). 

<div class="note">
  <div class="note_text">Its my birthday, and I have treated myself to a very nice gift.   </div> 
  <img class="sticker" src="/assets/sally/sally_04.png"/>
</div>

.note {
    margin-left: 20px;
    height: 598px;
    width: 450px;
}

.sticker {
    width:300px;
    height:300px;
    position: relative;
}

On the iphone this resolution should technically fit in a single screen (when scrolled down to the top of the div element). However the div element is rendering longer than expected. Why?

Am i missing something super obvious?

Upvotes: 0

Views: 913

Answers (2)

Mahesh Habarakada
Mahesh Habarakada

Reputation: 1

Please check your windows display Scale and layout settings. I had mine at default 125% and everything rendered on the browser were enlarged accordingly. Took me a couple of hours to figure this out and it could be a possible root-cause for your problem too. Not ideal when you wanna develop a pixel-perfect UI.

Cheers!

Upvotes: 0

Tanveer Shaikh
Tanveer Shaikh

Reputation: 1688

Well, can you be a bit more specific like what scaling have you given in the meta tag and the actual size of the image?

But till then, a work around can be to give width and height in '%' instead of 'pixels' in the sticker class. Make sure you maintain the height-width ratio lest the image looks stretched and dis-proportioned.

Something like:

**.sticker {
    width:65%;   /* or keep width:100% and don't specify the height*/
    height:40%;
    position: relative;
}**

Upvotes: 3

Related Questions