[英]Viewport scaling is not working on a mobile device
我對制作網站還是很陌生，我目前正在開發的這個網站處於開發的早期階段，但我想讓它對移動設備做出響應。 我添加了這個元標記<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 正常工作，但它應該給你這個想法。
你需要像這樣使用Media Query ：
@media only screen and (max-width: 600px) {
body {
// css
}
}
我看到您有標記問題。 您在<html>有一個<header> <html> ，這是錯誤的。 <html>標簽只有 2 個孩子： <head>和<body> 。 所以， <header>應該在<body>里面，也許這就是問題所在，因為你的元標記很好。 您可以在此處閱讀有關 HTML 文檔剖析的更多信息（稍微滾動一下）
如何獲取具有元視口大小的移動設備的實際視口？
[英]How to get the actual viewport of a mobile device that has a meta viewport size?
如果是手機，則在meta name =“ viewport”中添加“ width = device-width”
[英]Add “width=device-width” in meta name=“viewport” if mobile phone
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.