Как победить встроенное масштабирование в мобильном браузере ios?

Question

[тостер хабрович]

Я не могу понять почему не помагает этот код:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0" />

body {position:absolute;width:100%;height:100%;}

Все кнопки почемуто здоровенные - в два раза больше чем надо
Как сделать чтобы высота кнопок была точно той что указана в пикселях?

если делаю

<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,user-scalable=0" />

то масштаб становится нормальным

Answer 1

[Денис Инешин]

1. content замените на

width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0

2. Добавьте normalize.css

Comments

[тостер хабрович]

не помогло

[Денис Инешин]

тостер хабрович: а зачем position: absolute для body?

[тостер хабрович]

Денис Инешин: initial-scale=0.5,maximum-scale=0.5 - так масштаб нормальный

position: absolute для body - да какая разница? все равно масштабирование то же получается

[Денис Инешин]

тостер хабрович: походу вы там что-то накрутили. А вы ретину учитываете? Понимаете как она работает?

[тостер хабрович]

Денис Инешин: видимо не понимаю
мне надо просто - чтобы высота кнопки в пикселах была точно соответствующей

[Денис Инешин]

тостер хабрович: так смотрите сюда. На мобилах реальные пикселы не имеют такого значения как на десктопе. И реальное разрешение экрана не нужно учитывать. Все эти мелкие пиксели существуют на самом деле для того, чтобы изображение выглядело четким. Вот изучите эту прекрасную статью на тему: habrahabr.ru/post/237931

[тостер хабрович]

Денис Инешин: то есть проще говоря - надо делать размер в пикселях в два раза меньше как для обычного монитора?

[Денис Инешин]

тостер хабрович: да

[Денис Инешин]

тостер хабрович: точнее говоря это зависит от множителя

[Денис Инешин]

тостер хабрович: Если на обычном мониторе кнопка например 150х70, то и на ретина экране столько же. Просто она будет очень очень четкой и отлично сглаженной из-за ретины.

[тостер хабрович]

Денис Инешин: однако я не понял -можно ли создать элемент canvas и каждый его пиксель вывести буквально в пиксель ретины?

[Денис Инешин]

тостер хабрович: Это не имеет смысла, работайте с элементом как есть, просто все линии станут более четкими.

[тостер хабрович]

Денис Инешин: для канваса надо устанавливать конкретное значение в пикселях и брать его надо из свойств окна - канвас надо пиксель в пиксель выводить - это принципиально важно

[Денис Инешин]

тостер хабрович: свойства окна покажут все значения в обычных пикселях, не в ретина.