1

Необходимо отобразить в браузере мобильного устройства (для полной точности - в браузере Google Chrome на Android или подобных) сайт как есть, без зума, ровно под ширину экрана.

В примере ниже использован мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вот как сайт выглядит в браузере настольного ПК - ширина боковой менюшки ровно 40px, ничего не размыто, именно так, как прописано в CSS

В браузере настольного ПК

А вот тот же сайт в браузере на планшете - здесь ширина уже 52px, из-за чего делаю вывод, что размер пикселей устанавливается несколько больше, предположительно под DPI устройства, чтобы все элементы были одинакового размера (например, в сантиметрах) на всех мобильных устройствах.

В мобильном браузере

Но вместе с этим приходят швы между элементами и размытые края, что лично меня несколько огорчает, так как я до сих пор не нашел мета-тег в HTML или волшебное свойство в CSS (считать размеры пикселей в Javascript не брался, вдруг окажется велосипедом).

Подскажите, есть ли какой-то способ показать в мобильном браузере сайт точка-в-точку (например, чтобы ширина того самого меню была ровно 40px)?

3 ответа 3

1

Если дело в плотности пикселя, то можно уточнить размер для экранов с высокой плотностью пикселя:

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .class {
    ..
  }
}
0

google chrome Toggle device mode(иконка мобильника)

в последних версиях очень хорошо работает

введите сюда описание изображения

так же есть очень хороший способ для mac os. IOS simulator в связке с dev tools safary,

введите сюда описание изображения

но хром и андройдные устройства смотрит, и интерфейс более приятный на мой взгляд

0

Как показала практика, размытость происходит из-за картинок с маленьким разрешением.

А вот насчет швов, на ум приходит только inline блоки у которых после закрывающего тега и открывающего тега следующего блока стоит перенос на новую строку.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.