Блог

Я создаю веб-интерфейс пользователя для встроенного устройства и хочу воспроизвести этот пользовательский интерфейс в виде веб-сайта.

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

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

Вы можете использовать

 html, body {
  width: 100%;
  height: 100%;
}
#main_wrapper {
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 800px;
  position: relative
  margin: 0 auto;
}
  

Это оставляет открытым вертикальное центрирование (вы вообще этого хотите?) Или верхний край для настольных устройств, что должно быть сделано с помощью медиа-запроса, который включает min-width и / или min-height .