Как манипулировать размером экрана / размером области просмотра, чтобы на рабочем столе отображалась мобильная версия сайта? - PullRequest
Новая
       34

Как манипулировать размером экрана / размером области просмотра, чтобы на рабочем столе отображалась мобильная версия сайта?

1 голос
/ 10 мая 2019

Извините за неоднозначный вопрос, код нуб здесь. По сути, у меня есть сайт, где весь контейнер установлен на 100vw, а затем размер шрифта также установлен в vw. Это работает так, что независимо от того, как я масштабирую сайт, на мобильном или настольном компьютере, он будет хорошо отображаться.
Тем не менее, я хочу, чтобы он отображался на рабочем столе, как если бы это был экран мобильного размера (в основном это вид, который вы получаете, если вы делаете мобильный вид в Chrome).
Если я отрегулирую ширину контейнера, чтобы она была меньше 100 ватт, это нормально, но поскольку шрифты по-прежнему установлены относительно области просмотра, они становятся слишком большими для этой ширины. Поэтому я хочу найти способ сообщить компьютеру: «Даже если ваша фактическая ширина устройства равна, действуйте так, как если бы ширина устройства была такой».

У меня есть <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=yes"> в моих html-файлах, и я пытался установить ширину в разное количество пикселей, а не в ширину устройства, но все равно не повезло. Большое спасибо за любую помощь!

1 Ответ

1 голос
/ 10 мая 2019

Я думаю, что вы ищете Media Queries. Проверьте эту статью на CSS-хитрости .

Медиа-запросы позволяют выбирать на основе свойств устройства пользователя, таких как размер экрана. Это похоже на то, как псевдоклассы, такие как :hover, делают селектор более конкретным, за исключением того, что вы вкладываете стили в блок @media.

Как правило, если вы хотите, чтобы ваш веб-сайт изменял внешний вид в зависимости от ширины экрана, это был бы самый простой и надежный способ сделать это. Например, у вас установлен размер шрифта относительно области просмотра, но вы не хотите, чтобы он становился слишком большим. Вы можете добавить медиа-запрос, который устанавливает максимальный размер, например так: 

body {
  margin: 0;
}

#content {
  width: 100vw;
  font-size: 100vw;
  
  margin: auto;
  overflow: hidden;
  background: #ddd;
}
    
@media all and (min-width: 300px) {
  #content {
    width: 300px;
    font-size: 300px;
  }
}
<div id="content">
  Lorem ipsum
</div>

Когда экран имеет ширину не менее 300 пикселей, последний стиль переопределяет первый, поскольку он более специфичен.

Вот скрипка , так что вы можете увидеть, как она работает при настройке размера окна.

Примечания * * 1023 Установка мета-свойства viewport на device-width в основном просто сообщает мобильным браузерам, что ваш сайт работает с небольшими экранами. Без этого некоторые браузеры по существу «уменьшают», так что он рендерится так, как будто экран такой же большой, как обычный монитор. Таким образом, на маленьких экранах все будет выглядеть хорошо, хотя все будет очень маленьким. Это не говорит браузеру об использовании «мобильного режима». Это не вещь. Вам, вероятно, следует избегать установки размера шрифта в vw для большей части текста. Вы должны придерживаться базовых единиц, таких как rem, em или pt для шрифтов, потому что пользователи могут устанавливать в своих браузерах параметры доступности, которые будут влиять на размер шрифта. Вы хотите, чтобы ваши пользователи имели размер шрифта, который они хотят. Используйте vw только для специального текста, такого как основные заголовки / заголовки, но не для больших текстов, таких как статья.

...