• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Делюсь опытом Дизайн адаптивной вебстраницы

ave

ave

New member
Предлагаю свой вариант страницы для авторизации.
Адаптивной страницу делает один тег:
HTML: 
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no'/>
Пример простой, но там достаточно разного, что можно взять для других страниц.
Код: 
String html_header = "<!DOCTYPE html><html lang='ru'><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/><meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no'/><meta http-equiv='X-UA-Compatible' content='IE=edge'/><meta name='msapplication-tap-highlight' content='no'/><meta name='theme-color' content='#5c6bc0'/><title>Home</title><style>body {background-color:#5c6bc0; color:#ffffff; text-shadow: 0px 2px 6px rgba(0,0,0,0.4); font-family: Sans-Serif, Arial, Helvetica;}</style></head><body><center><br/>";
String html_end = "<br/><br/></center></body></html>";

void handleRoot() {
  String page = html_header;
  page += "<h2>Home</h2><h3>Настройка WiFi сети</h3></br><form method='POST' action='ok'>WiFi сеть</br><input style='background-color: #ffffff; color: #616161; font-size: 18px; padding: 5px; width: 200px; border: 0 none;' type='text' name='ssid'/></br></br>Пароль</br><input style='background-color: #ffffff; color: #616161; font-size: 18px; padding: 5px; width: 200px; border: 0 none;' type='text' name='pass'/></br></br></br><input style='background-color: #ffffff; color: #616161; font-size: 20px; padding: 5px; height: 40px; width: 150px; border: 0 none;' type='submit' value='Сохранить'/></form><br/><br/></br><span style='color:#e0e0e0; font-size:16px;'>&#169; 2016, www.home.com</span>";
  page += html_end;
  server.send(200,"text/html",page);
}


Смотреть страницу в интернете: Home

Если кто не знает, адаптивная страница - это страница, которая хорошо смотрится как на компьютере, так и на телефоне. И, если все размеры установлены правильно, - то на странице в телефоне отключается функция зума, сохраняя только прокрутку.
 
Последнее редактирование:
Юрий Ботов

Юрий Ботов

Moderator
Команда форума
Батарейка села. Садится она время от времени... А монитор крутить... ну не удобно.
 
pvvx

pvvx

Активный участник сообщества
ave написал(а):
Если кто не знает, адаптивная страница - это страница, которая хорошо смотрится как на компьютере, так и на телефоне. И, если все размеры установлены правильно, - то на странице в телефоне отключается функция зума, сохраняя только прокрутку.
Нажмите для раскрытия...
Что-то не доделано.
Независимо от типа эксплорера на компе (2560x1440):
Снимок1.gif
(Что будет в 4K и далее?)
А на телефоне (1440x2560):
Screenshot_2016-11-16-16-55-18.png
 
Последнее редактирование:
ave

ave

New member
На таких разрешениях не смотрел, значит нужно доделывать.
Можно через CSS менять размеры. Там размер текста автоматом подгоняется под размер экрана, даже при повороте экрана на телефоне, а в JS нужно было отлавливать это событие и код больше. Код CSS для примера из одного проекта.
CSS: 
@media only screen and (max-width: 270px) {
  .flow-text {
    font-size: 0.7rem;
  }
}

@media only screen and (min-width: 270px) {
  .flow-text {
    font-size: 0.7rem;
  }
}

@media only screen and (min-width: 300px) {
  .flow-text {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 360px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 390px) {
  .flow-text {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 420px) {
  .flow-text {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 450px) {
  .flow-text {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 480px) {
  .flow-text {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 510px) {
  .flow-text {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 540px) {
  .flow-text {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 570px) {
  .flow-text {
    font-size: 1.55rem;
  }
}

@media only screen and (min-width: 600px) {
  .flow-text {
    font-size: 0.7rem;
  }
}

@media only screen and (min-width: 630px) {
  .flow-text {
    font-size: 0.7rem;
  }
}

@media only screen and (min-width: 660px) {
  .flow-text {
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 690px) {
  .flow-text {
    font-size: 0.81rem;
  }
}

@media only screen and (min-width: 720px) {
  .flow-text {
    font-size: 0.85rem;
  }
}

@media only screen and (min-width: 750px) {
  .flow-text {
    font-size: 0.9rem;
  }
}

@media only screen and (min-width: 780px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 810px) {
  .flow-text {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 840px) {
  .flow-text {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 870px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 900px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 930px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 960px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 980px) {
  .flow-text {
    font-size: 1.0rem;
  }
}

@media only screen and (min-width: 1080px) {
  .flow-text {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .flow-text {
    font-size: 1.2rem;
  }
}
 
Последнее редактирование:
pvvx

pvvx

Активный участник сообщества
ave написал(а):
На таких разрешениях не смотрел, значит нужно доделывать.
Нажмите для раскрытия...
Ныне не 2000-й и многих мониторы с большим разрешением...
При другой ориентации тоже всё не очень:
Screenshot_2016-11-16-17-31-01.gif
Сайт с данным форумом нормально адаптируется под большие разрешения на компе...
Может там чего поглядеть... Я сам не знаю как сделать, но такой фукционал часто нужен и надо найти оптимальное решение... Посоветовать что пока не могу - не занимался этим.
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу