Почему Rem высота масштабирования в эмуляции устройств Chrome (и мобильных устройств)

Смотрите мое демонстрационное видео:https://youtu.be/8BQ_UgMGK2E Почему Rem высота масштабирования в эмуляции устройств Chrome (и мобильных устройств)

Я убежден, что rem отлично подходит для компонентов, и em для субкомпонентов, но, по-видимому, мой height:5rem соответствует чему-то, кроме корня font-size:16px

Не могу понять, почему devic е/мобильная эмуляция кажется масштабировать корневой размер шрифта, так как rem должны быть согласованы на 16px, независимо от того, сколько пикселей на экране

Мета тег просто говорит кодировка UTF 8
window.devicePixelRatio является последовательным 2

источник

2017-02-17 neaumusic

Это кажется странным. Как выглядит метатег вашего viewport? –

Это нормально, только meta charset utf8 – neaumusic

Нет. Похоже, у вас нет [viewport] (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) метатега, указанного ... попробуйте добавить ''. –

Как я уже говорил в предыдущих комментариях, вы можете решить эту проблему путем добавления viewport meta tag к head элементу документа.

Например:

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

При этом, это позволяет регулировать ширину и масштабирование окна просмотра браузера. Если этот тег имеет значение contentwidth=device-width, ширина экрана будет соответствовать независимым от устройства пикселам и гарантирует, что все различные устройства должны масштабироваться и вести себя последовательно.

Для получения более подробной информации, вот a related question, на который я ответил. Ответ более подробно касается разницы между max-width и max-device-width.

источник

2017-02-17 05:23:36

полезная ссылка https://css-tricks.com/probably-use-initial-scale1/ – neaumusic

ответ, как уже упоминалось, Джош Крозье, чтобы добавить

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

в index.html<head> раздел

источник

2017-02-17 05:21:12 neaumusic

Почему Rem высота масштабирования в эмуляции устройств Chrome (и мобильных устройств)

ответ

Смежные вопросы