[英]Media Query breakpoint not working due to webpage being 15px shorter than screen
基本上，我的媒體查詢比應有的低 15px，例如：
@media only screen and (max-width : 1200px) { .title{ color: blue; } }
一旦網頁寬度達到 1200 像素或更低，上面的 css 應該將 h1 更改為藍色，相反，它會在 1185 像素處觸發。 我試過其他斷點，它始終是 15px。 我使用檢查工具查看網頁寬度，並查看 body 元素的寬度，但我也使用了“console.log($(window).width())”，同樣的答案。 但是，打開檢查工具后，如果我重新調整窗口大小，它會在右上角以像素顯示“寬 x 高”。 該測量是准確的，一旦達到 1200 像素或更低，我的查詢就會激活，它正好比我的“身體”寬度顯示的寬度寬 15 像素。 誰能幫我解決這個問題？
我已經添加了下面的行，縮放為 100%，我也在使用 chrome。 有什么建議？ 我將 html 包含到其中包含 .title h1 標簽的部分，如果您需要查看其他內容，請告訴我。 我知道沒有其他 css 可以解決問題，媒體查詢位於我的 css 文件的底部。
<meta name="viewport" content="width=device-width, initial-scale=1" />
<html lang="en"> <head> <meta charset="utf-8"> <title>Mobius Designs - Architecture Firm</title> <meta name="description" content="An artichture firm based out of Dallas, TX with years of experience creating stunning buildings and structures."> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" type="image/ico" href="static/images/architecture_favicon.ico"> <!-- STYLESHEETS BELOW --> <link rel="stylesheet" href="static/css/home_section.css"> <link rel="stylesheet" href="static/css/project_section.css"> <link rel="stylesheet" href="static/css/contact_section.css"> <link rel="stylesheet" href="static/css/fontello.css"> <!-- JQUERY SCRIPTS BELOW --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="static/js/jquery_scripts.min.js"></script> </head> <body id="top"> <main> <!-- Start of the HOME section or the top of the page --> <div class="title-row"> <h1 class="title">World Class Architecture Firm</h1> <p class="title-description">Based out of Dallas, TX, Mosbius Designs is an architecture firm with over 10 years of experience designing groundbreaking buildings. From commercial, business, to personal, we pride ourselves on creating state if the art buildings and exceeding expectations. If you are a business or individual in need of architectural services, you can get in touch with our company <a href="#contact"><b>here</b></a>.</p> <h3 class="looking-to-hire title-links"><a href="#contact">I'm Looking to Hire </a><span class="chevron"> > </span> </h3> <button class="need-building title-links" type="button"> I Need a Building<span class="chevron"> > </span> </button> <p class="note"><small>*This website is merely an example, Mosbius Designs, all building names and locations are fictional. Any resemblence to real life locations or organizations is merely coincidence </small></p> <form class="building-form" action="process_building_form.php" method="post"> <div class="building-form-inputs"> <input type="text" name="name" placeholder="Name" required> <input type="email" name="email" placeholder="Email"> <input type="text" name="phone" placeholder="Phone"> </div> <textarea name="message" rows="8" placeholder="General Idea of Building or Message to Architecture Firm" required></textarea> <input type="submit" name="" value="Submit"> </form> </div>
您的代碼工作正常。 問題是你混淆了screen width和viewport width 。
使用console.log($(window).width())時看到的值是視口的寬度- 這是沒有滾動條的屏幕寬度。 這也是<body>元素可以達到的最大寬度（假設它的寬度為 100%） - 否則，如果它是屏幕的整個寬度，則最右側的 15px 將隱藏在滾動條下方。
如果要檢查屏幕寬度，即包括滾動條，請使用$(window).outerWidth() ，即：
console.log("Screen Width:"+$(window).outerWidth());
console.log("Viewport Width:"+$(window).innerWidth());
clientWidth檢測偏離了15px，可能是由於滾動條
[英]clientWidth detection is off by 15px, probably due to the scrollbar
JavaScript - 如果屏幕高度小於 790px，如何停止腳本工作？
[英]JavaScript - How do I stop a script from working if the screen height smaller than 790px?
CSS 媒體查詢，如果高度大於500px，如何在div 下添加陰影？
[英]CSS media query, how can I add a shadow under a div if it's height is bigger than 500px?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.