基本上，我的媒体查询比应有的低 15px，例如:
@media only screen and (max-width : 1200px) {
.title{
color: blue;
}
} 一旦网页宽度达到 1200px 或更低，上面的 css 应该将 h1 更改为蓝色，相反，它会在 1185px 时触发。我试过其他断点，一直是 15px。我使用检查工具查看网页宽度，并查看正文元素的宽度，但我也使用了“console.log($(window).width())”，答案相同。但是，在检查工具打开的情况下，如果我重新调整窗口大小，它会在右上角以像素为单位显示“宽度 x 高度”。该测量值是准确的，一旦达到 1200 像素或更低，我的查询就会激活，它比我的“ body ”宽度显示的宽度正好 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>
最佳答案
您的代码工作正常。问题在于您混淆了屏幕宽度 和视口(viewport)宽度。
您在使用 console.log($(window).width()) 时看到的值是视口(viewport)的宽度 - 这是屏幕没有滚动条的宽度。这也是您的 <body> 的最大宽度元素可以是(假设它的 100% 宽)——否则如果它是屏幕的整个宽度，最右边的 15px 将隐藏在滚动条下。
如果你想检查屏幕宽度，即包括滚动条，使用$(window).outerWidth() ，即:
console.log("Screen Width:"+$(window).outerWidth());
console.log("Viewport Width:"+$(window).innerWidth());
关于javascript - 由于网页比屏幕短 15 像素，媒体查询断点不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46750946/