У меня есть веб-сайт, который отображает то, как я его разработал, на настольном компьютере, но когда я просматриваю его с мобильного устройства, в частности, пикселя Google 3xl, он работает не так, как ожидалось. У меня нет доступа к каким-либо другим мобильным устройствам, поэтому я не знаю, отображается ли он таким же образом или нет, но я могу воспроизвести одну из проблем в Google Chrome, когда я использую инструменты разработчика и просматриваю его в мобильном режиме. Однако когда я просто уменьшаю окно браузера, веб-сайт ведет себя так, как я ожидал.
Некоторые технические детали:
Персональный веб-сервер работает на Raspberry Pi-3b с сервером Apache.
Домен был куплен у Google Domains.
Первое изображение ниже показывает, как веб-сайт отображается на моем телефоне при его начальной загрузке. Как видите, веб-сайт кажется слишком широким, что приводит к обрезанию правой стороны.
Второе изображение - результат моего сжатия дисплея, извините, я не знаю лучшего способа это сказать. Теперь на этом изображении все содержимое отображается так, как я ожидал, за исключением темно-серого фона и оранжевых рамок.
Мое намерение состоит в том, чтобы оно выглядело как второе изображение без «сжатия» и, конечно, с темным серым фоном и оранжевыми границами, простирающимися до правой стороны экрана.
Вот мой код HTML и CSS:
Пожалуйста, обратите внимание, что я относительно новичок в этом и хочу учиться, поэтому будьте добры, потому что, возможно, есть несколько лучших способов сделать это, я просто еще не знаю их:).
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/main.css">
<title>www.johndavidhock.net</title>
</head>
<body>
<header>
<div class="header-logobrand">
<img src="assets/img/physics.png" width="75" height="75" alt="physics" />
</div>
<div class="header-datetime">
<div id="header-dt-day" class="header-datetime-contents"></div>
<div id="header-dt-date" class="header-datetime-contents"></div>
<div id="header-dt-time" class="header-datetime-contents"></div>
</div>
<div class="header-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<div class="content">
<h1>Hello, Welcome to my Website!</h1>
<p>
This site is for projects that I am interested in within the fields of Math, Physics and Electronics. I hope
you enjoy your visit and perhaps learn something new.
<p>
</div>
<script src="assets/js/datetime.js" type="text/javascript"></script>
</body>
</html>
main.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
font-size: 20px;
background-color: lightslategray;
color: white;
}
header{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px;
align-items: center;
background-color: #35424a;
color: #e8491d;
border-bottom: 3px solid #e8491d;
position: sticky;
top: 0;
}
.header-logobrand{
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 15px;
}
.header-logobrand::after{
content: "Math and Science with Dave";
padding-left: 25px;
font-size: 25px;
}
.header-datetime{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.header-datetime div{
padding-left: 10px;
padding-right: 10px;
}
.header-nav{
display: flex;
justify-content: flex-end;
}
.header-nav ul{
display: flex;
justify-content: space-around;
}
.header-nav li{
list-style: none;
align-items: center;
padding: 28px;
}
.header-nav a{
text-decoration: none;
color: #e8491d;
}
.header-nav li:hover{
background-color: #e8491d;
}
.header-nav li:hover a{
color: white;
}
.content{
display: grid;
grid-template-columns: 1fr;
padding-top: 50px;
}
.content h1, p{
justify-self: center;
align-items: center;
text-align: center;
font-size: 30px;
padding: 20px;
width: 500px;
background-color: coral;
}
@media screen and (max-width: 768px){
header{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 80px;
position: sticky;
top: 0;
}
.header-logobrand{
display: flex;
justify-content: center;
align-items: center;
padding-left: 0px;
padding-bottom: 5px;
border-bottom: 3px solid #e8491d;
}
.header-datetime{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border-bottom: 3px solid #e8491d;
padding-top: 5px;
padding-bottom: 5px;
}
.header-nav{
display: flex;
justify-content: center;
}
.content{
padding-top: 0px;
}
}
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/contact.css">
<title>www.johndavidhock.net</title>
</head>
<body>
<header>
<div class="header-logobrand">
<img src="assets/img/physics.png" width="75" height="75" alt="physics" />
</div>
<div class="header-datetime">
<div id="header-dt-day" class="header-datetime-contents"></div>
<div id="header-dt-date" class="header-datetime-contents"></div>
<div id="header-dt-time" class="header-datetime-contents"></div>
</div>
<div class="header-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</header>
<div class="contact">
<h1>John David Hock</h1>
<p>jdh_developer@johndavidhock.net</p>
</div>
<script src="assets/js/datetime.js" type="text/javascript"></script>
</body>
</html>
contact.css
.contact{
display: grid;
grid-template-columns: 1fr;
padding-top: 50px;
}
.contact h1, p{
justify-self: center;
align-items: center;
text-align: center;
font-size: 30px;
padding: 20px;
width: 500px;
background-color: coral;
}
@media screen and (max-width: 768px){
.contact{
padding-top: 0px;
}
}