Блог

Главная - Вопросы по программированию - Изображение в верхней части веб-страницы вырезается на мобильном устройстве

Изображение в верхней части веб-страницы вырезается на мобильном устройстве

#html #css #flexbox #responsive

#HTML #css #flexbox #отзывчивый

Вопрос:

Я создаю веб-сайт, где вверху у меня есть логотип. Все работает нормально, пока я не попробую веб-сайт на меньшем экране (iPhone 6 или iPhone SE). Логотип сверху по какой-то причине обрезается. Мои ограничения заключаются в том, что я хочу, чтобы все было центрировано (по вертикали и горизонтали). Я ненадолго смог найти решение, удалив Как мне это решить?

Вот что у меня есть на данный момент:

 html,
body {
  height: 100%;
}

body {
  font-family: 'Noto Sans', sans-serif;
  background-color: #fafafa;
  color: #294455;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 375px) {
  body {
    align-items: top;
  }
}

.container {
  text-align: center;
  margin: 2em;
  width: auto;
}

.heading {
  margin-bottom: 2em;
}

.heading img {
  margin: 0;
}

.heading h1 {
  font-size: 4em;
  font-weight: bolder;
  margin: 0;
}

.heading h2 {
  font-size: 1.2em;
  margin: 0;
}  
 <!DOCTYPE html>
<html lang="en">

<head>
    <title>Sample Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Noto Sans" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="heading">
            <img src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/image-128.png" alt="GHJobs Subscribe">
            <h1>Sample website</h1>
            <h2>Blah blah blah subtitle.</h2>
        </div>
        <div class="message" hidden></div>
        <div class="spinner" hidden>
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
        <div class="form">
            <form id="subscribeUser">
                <input type="email" class="email" name="email" placeholder="Enter your email address">
                <button type="submit" class="subscribe">Subscribe</button>
            </form>
        </div>
        <div class="strip">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

Обновить
Я ввел медиа-запрос на максимальную ширину 375px (согласно комментариям и ответу), но ничего не изменилось. Что я делаю не так?

Комментарии:

1. Я полагаю, что проблема заключается в выравнивании по центру в body . Он хочет, чтобы центр основного текста был центром окна, и, таким образом, верхняя часть обрезается. Я бы предложил изменить выравнивание по вертикали, чтобы оно было выровнено по верху, когда окно определенного размера, используя @media тег в CSS.

2. Возможно, вам придется написать медиа-запросы, чтобы определить, как оно отображается при определенном размере экрана, а что нет.

3. @Santi, проверь мое обновление. Кажется, ничего не меняется даже после добавления медиа-запроса.

Ответ №1:

Добавьте медиа-запрос в свой CSS, чтобы при уменьшении окна текстовое поле выравнивалось по верху. В настоящее время ваше body выравнивается по центру, и это приводит к обрезке верха.

Я полагаю, что медиа-запрос, который вы хотите, выглядит примерно так:

 @media screen and (max-width: 375px) {
  body {
    align-items: flex-start;
  }
}

Ответ №2:

Вы используете align-items: center в коде. Браузер пытается центрировать основное содержимое по вертикали и горизонтали. Таким образом, ему все равно, выходит ли содержимое из области просмотра. Вы можете решить эту проблему, используя align-items: top в определенной точке останова, достаточно маленькой, чтобы быть мобильным устройством.