Force Mobile View на рабочем столе

Question

Использование Rails и Bootstrap 4. На данный момент я разработал сайт исключительно для Mobile Web. Так что он оптимизирован только для мобильного браузера. Это отзывчивый, хотя. Так что на рабочем столе это выглядит больше. Как заставить мобильный сайт выглядеть похожим на рабочем столе?

Вот пример сайта, который работает, но я не знаю, как он создается: https://www.sorabel.com/

Answer 1

Вы можете добавить элемент, который обернет весь ваш контент. Все зависит от того, как вы уже настроили его, но в мобильном телефоне он будет иметь полную ширину и будет соответствовать размеру мобильного телефона, как только он попадет на планшет. Еще раз мне нужно подчеркнуть это, но я не уверен, будет ли это хуже на планшете или рабочем столе, делающих это.

* {
  box-sizing: border-box;
}

.body-wrapper {
  @media (min-width: 768px) {
    max-width: 767px;
    width: 100%;
    margin: 0 auto;
  }
}

.header {
  height: 10rem;
  padding: 2rem;
  background-color: aqua;
}

<div class="body-wrapper">
  <header class="header"></header>
</div>

Answer 2

Хорошо, название не совсем правильное, но я точно знаю, о чем вы говорите. Размещенный вами сайт является адаптивным веб-сайтом, созданным с использованием медиазапросов.

Ключом здесь является использование медиазапросов для сохранения ширины контента независимо от того, какой экран просматривает пользователь. , Таким образом, вы бы использовали отзывчивые контрольные точки, подобные этим:

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ПРИМЕЧАНИЕ: вы можете найти больше этого в документации Bootstrap здесь: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-точки останова

Наиболее важные вопросы касаются рабочего стола (или, если вы хотите мобильное представление в планшетах, вы также можете использовать запрос для планшетов)

Внутри запроса // Large devices (desktops, 992px and up) вы бы поставили что-то вроде этого:

// Large devices (desktops, 992px and up)
    @media (min-width: 992px) {
     .mobile-view{
        max-width: 34%;
        padding: 0rem 0px 6.6rem;
        background-color: grey;
     }
 }

Тогда вам просто нужно добавить этот класс mobile view в ваш основной div в вашем html.

<div class="mobile-view">
    all your classes and html tags here
</div>