Как сделать фоновое отображение на весь экран (Safari)
На телефонах Safari сверху появляется ужасная белая полоса. Я бы хотел, чтобы он был заполнен фоном
Например, на этом сайте такой полоски сверху нет.
HTML-файл:
<!DOCTYPE html>
<html lang = "ru">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Авторизация</title>
<link rel = "stylesheet" href = "/css/login.css?v=1.1.4">
</head>
<body>
<div class = "container-border active">
</div>
</body>
</html>
CSS-файл:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
html, body {
height: 100vh;
overflow-y: hidden;
background: linear-gradient(180deg, hsl(250, 15%, 30%), hsl(250, 15%, 10%));
}
body {
display: flex;
align-items: center;
justify-content: center;
}
У меня нет Safari, поэтому я не могу проверить это самостоятельно; если вы используете: height: 100dvh; или height: 100lvh;, проблема решается? Или, возможно, попробуйте использовать min-height: 100vh; (также протестируйте блоки lvh и dvh). Документация по единицам области просмотра: Developer.mozilla.org/en-US/docs/Web/CSS/…
@DavidThomas К сожалению, это ни на что не повлияло. :(
Думаю, это зависит от настроек ios... allthings.how/… Это будет непросто?
Я думаю, что большинство из них заполняют похожие цвета цветами темы. Хотите проверить? stackoverflow.com/questions/70856591/…
Ответы 2
Я полагаю, вы имеете в виду изменение цвета строки состояния?
Попробуйте добавить метатег apple-mobile-web-app-status-bar-style. Вы можете ознакомиться с разделом «Изменение внешнего вида строки состояния» на этой странице
<meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent">
Или вы можете попробовать добавить метатег theme-color. тема-цвет
Да!!! Это именно то, что мне нужно. Есть только одна маленькая проблема. Я использую градиент в качестве фона. Я выбрал цвет темы #454158, как верхнюю часть градиента. Но внизу, если потянуть страницу вверх, появляется тот же цвет и градиент снизу нарушается. Это не так критично, но можно ли это тоже исправить? извините за мой английский
@EFERYEG Единственный способ исправить это — вручную изменить цвет при прокрутке. Возможно, лучше изменить дизайн страницы, чтобы сделать ее непрокручиваемой.
Я проверил это на сафари.
изображения
Код
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
html {
padding-top: env(safe-area-inset-top);
}
html, body {
height: 100vh;
overflow-y: hidden;
background: linear-gradient(180deg, hsl(250, 15%, 30%), hsl(250, 15%, 10%));
}
body {
display: flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html lang = "ru">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name = "theme-color" content = "hsl(250, 15%, 30%)"/>
<title>Авторизация</title>
<link rel = "stylesheet" href = "test.css">
</head>
<body>
<div class = "container-border active">
</div>
</body>
</html>Супер! Спасибо большое) А можно ли еще сделать, чтобы страница не прокручивалась? У меня есть только один элемент посередине страницы с кнопкой. В Safari он расположен не посередине, а чуть ниже. И страницу можно прокрутить немного вниз height: 100dvh решает эту проблему, но я не знаю, правильно ли это делать. Возможно, есть лучшие варианты сделать страницу статичной.
Нет, theme-color просто устанавливает для него цвет, аналогичный цвету содержимого страницы, и не меняется при прокрутке. Если это дизайн с фиксированным заголовком вверху, но... @EFERYEG
Не могли бы вы использовать
<>(фрагмент Javascript/HTML/CSS), чтобы изменить запрашиваемый код и ожидаемый статус в исполняемую форму?