Веб-страница уменьшается на мобильных устройствах Bootstrap 4 - PullRequest
Новая
       72

Веб-страница уменьшается на мобильных устройствах Bootstrap 4

0 голосов
/ 11 апреля 2020

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

Я использовал максимальную ширину: 1200 пикселей, думая, что большинство смартфонов имеют разрешение 1080p, так что это будет хорошо для большинства смартфонов. 

@media (max-width: 1200px) and (orientation: portrait) {
  .container {
    min-width: 100%;
    /* font-size: 120%; */
  }
}

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

image image

Когда я удалил (ориентация: портрет) свойство. Тогда предыдущая проблема была решена, но на десктопах с HD или меньшим разрешением CSS в медиа-запросе применяется и веб-страница выглядит некрасиво, поскольку все поля ввода расширяются и шрифт увеличивается.

image

Я пытался найти несколько методов в Интернете, но это не решило проблему. Я также пытался использовать user-scalable=no из метатега, но не работает. 

<meta name='viewport' content='user-scalable=0'>

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

, но проблема все еще существует, Может кто-нибудь помочь мне, как я могу исправить эту ошибку?

Исходный код моего WebApp

https://github.com/sachinverma53121/auction-app

1 Ответ

1 голос
/ 11 апреля 2020

добавьте этот тег meta в свой тег head 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...