Для настройки высоты первого экрана на мобильном устройстве на 100% высоты видимой области можно использовать CSS свойство "height: 100vh;". Это свойство устанавливает высоту элемента в процентовом соотношении к высоте видимой области окна браузера.
Чтобы гарантировать, что первый экран всегда будет находиться в области видимости, можно также использовать CSS свойство "overflow: hidden;" для скрытия вертикальных прокруток, а также добавить метатег viewport в html документ для правильной настройки масштабирования и размеров окна браузера.
Например:
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.first-screen {
height: 100vh;
background-color: lightblue;
text-align: center;
padding-top: 50vh; /* Для вертикального центрирования содержимого */
}
</style>
</head>
<body>
<div class="first-screen">
<h1>Welcome to my website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
```
Этот код приведет к тому, что первый экран будет занимать всю видимую высоту окна браузера на мобильном устройстве, а содержимое будет вертикально центрировано. Используя эти подходы, вы можете обеспечить, что первый экран вашего веб-сайта будет всегда отображаться корректно на мобильных устройствах.