Media queries для размера экрана, определение мобильного устройства

[Veseloff]

Привет. Суть в том, что я знаю как media queries действуют на разрешения экрана, но этого оказалось недостаточно. У меня мобильник имеет какое-то конское разрешение и сайты в нём открываются так, будто у него 1 точка экрана = 1 пикселю страницы. Понятно, что я могу определить джаваскриптом всё, что угодно и поставить какие угодно классы. А можно ли это как-то правильно делать при помощи простого CSS?

[xzarxzes]

Вот это можете попробовать поставить - <meta name="viewport" content="width=device-width, initial-scale=1.0">, если я правильно понял проблему.
 

[Vlad]

У тебя Андроид наверное?

device-pixel-ratio есть, как раз подходит для определения конского разрешения.

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio

 

Для Андроида ещё была специальная штука target-densitydpi, но нагуглил что уже выпилили.

[Veseloff]

У тебя Андроид наверное?

Да, именно. Спасибо, посмотрю.

[Veseloff]

В общем я плохо сформулировал вопрос, наверное. Задача: сделать сайт читабельным на современных мобильных устройствах. без необходимости зумить и листать. Покажу на примерах. Вот одна страница. В браузере на компьютере всё хорошо и читаемо. Если открыть её в мобильном браузере (айфон с ретиной подойдёт или андроид с большим разрешением), то всё будет мелко, оба блока будут на месте. Во втором примере я добавил -webkit-min-device-pixel-ratio: 2. Всё хорошо, синий блок пропал. Но один фиг всё мелкое. Изменение ширины элементов html и body ни к чему хорошему не приводит. Плюс ко всему на десктопной ретине пропадает синий блок, что логично, но это, конечно, полная фигня. Третья попытка была сделана с min-resolution: 150dpi. В десктопном фаерфоксе это работает, а вот в мобильных сафари и андроиде — не работает. Ну и я думаю, что это опять сломает десктопную ретину. Если попытаться конкретизировать, то задача сводится к тому, чтобы заставить браузер быть шириной, например, 500 пикселей, чтобы всё хорошо читалось.

[Vlad]

Так добавь это, и будет тебе 500 px на мобилках.

<meta id="viewport" name="viewport" content="width=500, initial-scale=1.0, user-scalable=no">

[Veseloff]

Точно, спасибо. Вот я бивень. Уважаемый xarxzes мне ответил то, что нужно в первом же сообщении, а я и не понял.