0

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

Выставляю стили для body, но открываю на мобильном и сайт открывается не так как надо, ниже прикреплю 2 картинки как нужно и как сейчас.

html {
  min-width: 1280px;
}

body {
  margin: 0;
  min-width: 1280px;
  font-size: 14px;
  text-align: center;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
}

body * {
  box-sizing: border-box;
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>default title</title>
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!--[if (gt IE 9)|!(IE)]><!-->
  <link href="static/css/main.css" rel="stylesheet" type="text/css">
  <!--<![endif]-->

  <meta property="og:title" content="" />
  <meta property="og:url" content="" />
  <meta property="og:description" content="" />
  <meta property="og:image" content="" />
  <meta property="og:image:type" content="image/jpeg" />
  <meta property="og:image:width" content="500" />
  <meta property="og:image:height" content="300" />
  <meta property="twitter:description" content="" />
  <link rel="image_src" href="" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:100,200,300,400,500,600,700&amp;subset=cyrillic" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=cyrillic" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

Изображения, как сейчас открывается и как нужно, чтобы открывался, устройство iphone 5s

PS: Правильное отображение можно получить только зумированием сайта

как открывается сейчас

как нужно чтобы открывался!

17
  • <meta name="viewport" content="width=device-width, initial-scale=1"> в head добавьте 2 авг 2018 в 10:22
  • используйте медиа запросы
    – Bert
    2 авг 2018 в 10:23
  • @ArtemGorlachev первым делом было добавлено, но не помогает
    – msupreme
    2 авг 2018 в 10:24
  • 1
    ну и хорошо, это же то, что хотелось? вы же убрали min-width. Сайт зуммируется как надо, 100% ширины устройства.
    – diproart
    2 авг 2018 в 12:20
  • 1
    @diproart Вообщем разобрался, спасибо, как раз ваши комментарии помогли!
    – msupreme
    2 авг 2018 в 17:24

1 ответ 1

0

Используете медиа-запросы. Советую использовать Grid (Адаптивная сетка). Ссылка: тык.

  // Ландшафтный экран телефоны
  @media (max-width: 480px) { ... }
 
  // От ландшафтного экрана телефона до потретного планшета
  @media (max-width: 767px) { ... }
 
  // От портретного планшета до ландшафтного экрана и настольных дисплеев
  @media (min-width: 768px) and (max-width: 979px) { ... }
 
  // Большой дисплей
  @media (min-width: 1200px) { ... }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.