Я только что просмотрел свой веб-сайт на мобильном устройстве, и он отлично смотрится в альбомной ориентации. Однако изображения занимают только половину страницы в портретном режиме. Это также сжимает мой lo go, что тоже является проблемой.
Изображения отображаются в слайдере, который я создал на HTML и CSS.
Я также с использованием bootstrap 4, однако у меня также была эта проблема до того, как я добавил bootstrap в свой код.
См. ниже x2 изображения того, как он сейчас выглядит на мобильных устройствах, и изображение x1 того, как я хочу тоже смотреть в портрете.
ПОРТРЕТ - КАК ЭТО ВЫГЛЯДИТ В НАСТОЯЩЕЕ ВРЕМЯ
ПЕЙЗАЖ - КАК ЭТО ВЫГЛЯДИТ (доволен этим)
ПОРТРЕТ - КАК Я ХОТЕЛ бы, чтобы он сидел на экране
Я пробовал:
- Установка ширины / высоты на 100% в CSS
- Добавление метатега области просмотра, чтобы остановить его масштабирование на мобильных устройствах
- Изменение высоты моего скроллера с помощью тега @media (чтобы он не влиял на просмотр на рабочем столе)
См. Ниже текущие HTML и CSS.
HTML
<html>
<head>
<style>
/* hide mobile version by default */
.my-navbar .mobile {
display: none;
}
/* when screen is less than 600px wide
show mobile version and hide desktop */
@media (max-width: 600px) {
.logo .mobile {
display: block;
}
.logo .desktop {
display: none;
}
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="main.css" rel="stylesheet" type="text/css" />
<title>? shannonkelseyann</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="../websitehtml/images/white-heart.png"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html"><img class="home" src="https://i.imgur.com/c2UQ8om.png"></a>
<a class="nav-item nav-link" href="campaign.html"><img class="campaign" src="https://i.imgur.com/cQE71uK.png"></a>
<a class="nav-item nav-link" href="e-commerce.html"><img class="e-commerce" src="https://i.imgur.com/01tEvO3.png"></a>
<a class="nav-item nav-link" href="info.html"><img class="info" src="https://i.imgur.com/JjNQ54R.png"></a>
</div>
</div>
</nav>
<div class=logo>
<img src="../websitehtml/images/desktoplogo1.png" class="desktop">
<img src="../websitehtml/images/mobile-logo.png" class="mobile">
</div>
<div class="slider">
<div class="slide" id="slide-1"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/2.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-2"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/1.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-3"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/3.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-4"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/4.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-5"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/5.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-6"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/6.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-7"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/7.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-8"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/8.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-9"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/9.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-10"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/10.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-11"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/11.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-12"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/12.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-13"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/13.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-14"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/14.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-15"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/15.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-16"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/16.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-17"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/17.jpg" height="100%" alt="♥"></div>
</div>
</body>
<footer><p style="text-align: center;">© 2020 by shannonkelseyann</footer></p>
</html>
CSS
background-image: url(../WEBSITE/bluebackground.jpg);
background-repeat: repeat;
background-size: cover;
background-color: #8DB6E4;
width: 100vw;
height: 100vh;
background-position: center center;
position: relative;
text-align: left;
margin: 0px;
}
div {
margin: 0px;
padding: 0px;
}
footer {
color: white;
padding-bottom: 1px;
font-family: arial;
font-size: 10pt;
float: center;
}
h2 {
padding-left: 24px;
padding-top: 0px;
}
.row {
padding: 5%;
}
.slide {
flex-shrink: 0;
height: 100%;
width: 100%;
padding: 3px;
margin: 0px ;
}
.slider {
width: 1400px;
height: 650px;
display: flex;
overflow-x: auto;
margin: 11px ;
padding: 0px ;
padding-top: 0px;
}
.slider {
...
-webkit-overflow-scrolling: touch;
}
.navbar {
float: left;
padding-top: 18px;
}
.my-navbar {
flex-shrink: 0;
display: flex;
overflow-x: auto;
}
Не вс Что я делаю неправильно, но любая помощь будет очень признательна. Заранее спасибо,