视口缩放在移动设备上不起作用答案

【问题标题】：Viewport scaling is not working on a mobile device视口缩放在移动设备上不起作用
【发布时间】：2020-07-09 20:41:17
【问题描述】：

我对制作网站还是很陌生，我目前正在开发的这个网站处于早期开发阶段，但我想让它对移动设备做出响应。我添加了这个元标记<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，但它似乎不起作用，唯一起作用的是user-scalabel=no。我尝试了不同的尺度变化和一堆不同的论点，但结果仍然是一样的。 css可能有问题。有任何想法吗？谢谢你。

function anim() {


            $(".slider").delay(1000).animate({
                width: 'show',

            }, 1000);

}

$(document).ready(function () {
    $('.carousel').carousel({
        pause:"false"

    })
})

body {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: moccasin;
}


.secondpic {
    margin-top: 10%;
    display: block;
    width: 100%;
    overflow: hidden;
    height: auto;
    position: relative;
}

.arrow {
    margin-top: 10%;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    height: auto;
    position: relative;
}

#text {
    overflow: hidden;
    position: relative;
    text-align: center;
    bottom: 5vw;
    transform: rotate(-2deg);
    font-size: 1.9vw;
    color: #634731;
    font-weight: bold;
}

.slider {

    display: none;
    position: absolute;
    right: -60px;
    top: 0;
}

.container {
    margin-right: 0;
}

.navbar {
    top: -100px;
    white-space: nowrap !important;
    padding-top: 100px !important;
    float: right;
    background-color: transparent;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    z-index: 10;
    right: 0;
    padding-right: 0;
    position: fixed;
    opacity: 1;
    margin: 0;
}

.buttons {
    padding-bottom: 0;
    margin-bottom: 0px !important;
    margin-right: -1px;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.logo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.text-white {
    padding-top: 15px !important;
    padding-bottom: 5px !important;
}

.bg-secondary {
    background-color: rgba(225, 159, 113, 1) !important;

}

.buttons a:hover {
    background-color: orange !important;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Prosatin</title>
    <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">
    
    <script defer src="js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script src="website.js"></script>


</head>

<header>
    <div class="">
        <nav class="navbar navbar-expand-lg navbar-light slider">

            <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"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav buttons">
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">FOTOGALERIE</a>
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">AKCE</a>
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">O NAS</a>
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">ZPEVNIK</a>
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">KONTAKTY</a>
                    <a type="button" class="nav-link p-3 mb-2 bg-secondary  buttons logo"
                       href="https://www.facebook.com/letnistanovytaborProsatin/"><img src="facebook.png"> </a>
                </div>
            </div>
        </nav>
    </div>
</header>


<body onload="anim()">


<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://i.ibb.co/sjngKLM/tabor.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://i.ibb.co/JHYhT9Z/DSC-7364.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://i.ibb.co/yS42F7s/im2.png" alt="Third slide">
        </div>
    </div>
</div>

<div>
    <img class="arrow" src="https://i.ibb.co/VM1v7kD/Image-5.png">
    <p class="" id="text">NEJNOVEJSI FOTOGRAFIE</p>
    <img class="secondpic" src="https://i.ibb.co/NjpppGn/Image-4.png">
</div>


</body>
</html>

JSfiddle

Incorrect layout on a phone

我无法让 sn-p 和 JSfiddle 正常工作，但它应该会给你这个想法。

【问题讨论】：

标签： javascript html css bootstrap-4 responsive-design

【解决方案1】：

你需要像这样使用Media Query：

@media only screen and (max-width: 600px) {
  body {
    // css
  }
}

【讨论】：

我对@987654324@ 很熟悉，但我希望这种result 可以很好地随屏幕缩放并让我滚动。

【解决方案2】：

我发现您遇到了标记问题。你在<html> 中有一个<header>，这是错误的。 <html> 标签只有 2 个子标签：<head> 和 <body>。所以，<header> 应该在<body> 内，这可能是问题所在，因为您的元标记很好。你可以阅读更多关于 HTML 文档的剖析here（滚动一点）

【讨论】：

谢谢指出，不过还是显示了整个website
按手机右上角的三个点，然后选择桌面站点。看看会发生什么