Bootstrap5中Media Query未生效，自定义样式异常求助

我使用Bootstrap5开发网页，将自定义样式表放在样式引入列表的最后，尝试为.content类设置边距样式，样式代码如下：

.content {
        width: 100vw;
        margin-top: 0;
        margin-bottom: 0;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
@media only screen and (min-width: 768px) { 
.content {
        width: 70vw;
        margin-left: 15vw;
        margin-right: auto;
        margin-top: 15vh;
        margin-bottom: 15vh;
        background-color: white;
        min-height: 80vh;
        padding: 0;
    }
}

网页使用<main class="content">包裹核心内容，预期移动端下该类margin为0、宽度100vw，但测试发现移动端也应用了媒体查询中的宽度与边距样式。HTML头部代码如下：

<meta charset="utf-8">
<title>NC Commodities Conference of Soybeans, Corn, Small Grains, and Cotton Producers</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

请问问题出在哪里？

核心原因 #

你的HTML头部缺少Bootstrap响应式布局必需的视口(viewport)元标签。没有这个标签时，浏览器会以桌面端默认宽度（通常约980px）渲染页面，即使在移动设备上也会触发min-width:768px的媒体查询规则，导致移动端错误应用大屏样式。

解决方法 #

在<head>区域添加视口元标签，建议放在<meta charset="utf-8">之后：

<meta name="viewport" content="width=device-width, initial-scale=1">

添加后，浏览器会根据设备实际屏幕宽度计算视口尺寸，移动端就能正确应用非媒体查询内的.content基础样式，只有当屏幕宽度≥768px时，才会加载媒体查询里的大屏适配样式。

内容的提问来源于stack exchange，提问作者Bill Teale