как определять устройство
загружать нужную страницу
Делать отдельно чисто мобильный сайт
320px
адаптировал под мобильные телефоны, планшеты и десктоп.
Было принято решение подогнать разрешение на 20 пикселей больше
ноутбук, в котором разрешение 1349px X 625 px
Гугл также не помог
<div сlass="header"><div class="header"><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Сайт Портфолио</title>
<!-- Нормализация стилей -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- Собственные стили -->
<link rel="stylesheet" href="css/main.css">
<!-- Подключение веб-шрифтов ИКОНОК ЗНАЧКОВ -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather&family=PT+Sans+Caption:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon/favicon-16x16.ico" >
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
html {
font-family: "PT Sans Caption", sans-serif;
font-size: 16px;
line-height: 1.5;
}
.header {
background-size: cover;
background: red;
text-align: center;
}
</style>
<body>
<div class="header">
<div class="header__title">Ананьев Виталий</div>
<div class="header__slogan">Верстка сайтов на HTML и CSS <br>HTML5 CSS3 JS jQuery</div>
<div class="header__arrow">стрелка</div>
</div>
</body>
</html>