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

ave · 15 Ноя 2016

Предлагаю свой вариант страницы для авторизации.
Адаптивной страницу делает один тег:

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

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

Юрий Ботов · 15 Ноя 2016

Перевороты экрана отрабатывает?

ave · 15 Ноя 2016

Да.

Сергей_Ф · 15 Ноя 2016

@Юрий Ботов ну кто же мешал проверить? Ссылка же есть. Отрабатывает корректно только что проверил.

Юрий Ботов · 16 Ноя 2016

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

pvvx · 16 Ноя 2016

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

Что-то не доделано.
Независимо от типа эксплорера на компе (2560x1440):

(Что будет в 4K и далее?)
А на телефоне (1440x2560):

ave · 16 Ноя 2016

На таких разрешениях не смотрел, значит нужно доделывать.
Можно через 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 · 16 Ноя 2016

ave написал(а):
На таких разрешениях не смотрел, значит нужно доделывать.

Ныне не 2000-й и многих мониторы с большим разрешением...
При другой ориентации тоже всё не очень:

Сайт с данным форумом нормально адаптируется под большие разрешения на компе...
Может там чего поглядеть... Я сам не знаю как сделать, но такой фукционал часто нужен и надо найти оптимальное решение... Посоветовать что пока не могу - не занимался этим.

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

ave

New member

Юрий Ботов

Moderator

ave

New member

Сергей_Ф

Moderator

Юрий Ботов

Moderator

pvvx

Активный участник сообщества

ave

New member

pvvx

Активный участник сообщества