Как предотвратить сокращение / адаптивную кожу ниже 360px в ширину

Question

Я делаю веб-приложение, которое я создал адаптивно. Я не смог получить некоторые из экранов, чтобы получить меньше, чем 360px в ширину. Но многие смартфоны пытаются отобразить его на 320 пикселей в ширину. Как сделать так, чтобы он был отзывчивым до 360px, но не меньше?

ОБНОВЛЕНИЕ: До публикации я уже указывал тег вида:

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

И я установил минимальную ширину для контейнера 360px. Проблема в том, что при этом 40px справа скрыты, когда пользователь впервые посещает сайт, поскольку IP-телефоны и многие другие по умолчанию показывают только 320px, хотя они способны показывать больше. Я знаю, что они могут уменьшить масштаб, но я хочу, чтобы он отображал 360px в ширину во время загрузки.

Answer 1

Я не проверял это изменение области просмотра, но попробую.

<meta name="viewport" content="width=device-width, min-width=360, initial-scale=1.0" />

Я надеюсь, что это сделает ширину равной ширине устройства, если ширина устройства не меньше 360px (то есть iphone), в этом случае сделайте ширину 360px.

Лучше всего хотя бы немного изменить свое мышление и использовать медиазапрос, чтобы адаптировать свой код для лучшей презентации с шириной 320 пикселей. Поэтому позвольте вашему сайту отображаться с шириной 320 пикселей, но измените CSS, чтобы сайт хорошо подходил для этой ширины.

Например:

@media screen and (max-width: 360px){
  .wrapper {
     width: auto;
  }
  //change some font sizes
  //put float: none on a few elements that were previously floating
  //change a few widths of container elements to auto
  //etc.
}

CSS внутри медиа-запроса будет применен только если устройство имеет 360px или меньше.

Answer 2

Поэтому обязательно добавьте следующий метатег viewport в заголовок вашего HTML-документа:

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

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

Я не уверен, хотите ли вы, чтобы ваша ширина стала не шире 360px или вы застряли на 360px и хотите убедиться, что она уменьшается до 320px.

Если вы хотите, чтобы он был не меньше чем 360px... Вы хотите, чтобы ваш элемент "wrapper" был плавным только до 360px, вы можете установить свойство в вашем div-обертке (или любом другом элементе, контролирующем ширину вашего сайта) в CSS сказать min-width: 360px;, Это сделает так, чтобы элемент-обертка не стал меньше, чем 360px в ширину.

Если вы не можете заставить его изменить размер меньше чем 360px и хотите, чтобы это... Это как бы наоборот. Может быть, ваш элемент-обертка имеет min-width: 360px задавать. В этом случае вы можете удалить это свойство, которое позволит ему масштабироваться уже, чем 360px.