Почему фиксированные размеры элементов html height/width больше, чем ожидалось, на мобильных устройствах, несмотря на высокую плотность пикселей?

Question

Я пытаюсь создать «мобильное первое» веб-приложение. И при этом я использую мета-атрибут «viewport», чтобы соответствующим образом масштабировать элементы.

Но я хочу некоторые элементы должны быть фиксированным размером. Например, я хочу, чтобы div ниже был 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; 
} 

На Iphone это разрешение должно технически поместиться в одном экране (при прокрутке вниз к верхней части элемента DIV),. Однако элемент div возвращает больше, чем ожидалось. Зачем?

Я пропустил что-то супер очевидное?

Answer 1

Ну, можете ли вы быть более конкретным, как то, что вы указали в метатеге и фактическом размере изображения?

Но до этого работа вокруг может состоять в том, чтобы задать ширину и высоту в '%' вместо «пикселей» в классе стикеров. Убедитесь, что вы поддерживаете соотношение высоты и ширины, чтобы изображение не выглядело растянутым и несогласованным.

Что-то вроде:

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