启用触控模拟后CSS响应式布局失效，div排列不符合预期如何解决？

这是我的HTML站点正常显示效果：

这是关闭触控模拟时的移动端视图：

启用触控模拟后显示效果如下：

为什么启用触控模拟后样式会发生变化？相关代码如下：

CSS代码 #

body {
    background:rgba(71, 71, 71, 0.3);
    height:100vh;
    width:100%;
    margin:0;
    color: #fff;
}
.main {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 65%;
    min-width: 900px;
    max-width: 1100px;
    background: rgba(29, 29, 29, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.sub {
    box-sizing: border-box;
    vertical-align: middle;
    border: solid 1px #fff;
    border-radius: 16px;
    width: 50%;
    overflow: auto;
    padding: 20px;
}
.float_l {
    float: left;
}
.float_r {
    float: right;
}
@media screen and (max-width: 950px) {
    .main {
        min-width: 350px;
        width: 90%;
        height: auto;
        margin: 8vh auto;
        position: relative;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 0;
        left: 0;
    }
    .float_l {
        float: none;
        width: 100%;
    }
    .float_r {
        float: none;
        width: 100%;
    }
}

HTML代码 #

<!DOCTYPE HTML>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="main">
<div class="sub float_l">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac nisi elit. Aliquam erat volutpat. Praesent in tellus eget turpis elementum facilisis quis vitae odio. Aliquam sollicitudin ante eget felis tristique, eu dapibus est laoreet. Fusce interdum, lorem faucibus sagittis tincidunt, tellus mi facilisis eros, a convallis lacus nisl at ligula. Aliquam rhoncus laoreet ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit elit, rhoncus vitae ligula sit amet, porttitor imperdiet sem. Nulla rhoncus nibh rutrum, accumsan nisi at, commodo sem. Sed id mi eu dui bibendum suscipit. Vivamus massa justo, tempus vitae lacus blandit, iaculis cursus orci. Praesent molestie, quam non sodales aliquam, justo orci rhoncus tellus, vitae tempor nisl felis et diam. Curabitur sed ultricies lacus. Cras id orci augue.</div>
<div class="sub float_r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac nisi elit. Aliquam erat volutpat. Praesent in tellus eget turpis elementum facilisis quis vitae odio. Aliquam sollicitudin ante eget felis tristique, eu dapibus est laoreet. Fusce interdum, lorem faucibus sagittis tincidunt, tellus mi facilisis eros, a convallis lacus nisl at ligula. Aliquam rhoncus laoreet ultricies. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent elit elit, rhoncus vitae ligula sit amet, porttitor imperdiet sem. Nulla rhoncus nibh rutrum, accumsan nisi at, commodo sem. Sed id mi eu dui bibendum suscipit. Vivamus massa justo, tempus vitae lacus blandit, iaculis cursus orci. Praesent molestie, quam non sodales aliquam, justo orci rhoncus tellus, vitae tempor nisl felis et diam. Curabitur sed ultricies lacus. Cras id orci augue.</div>
</div>
</body>

我的需求是桌面端div横向排列，移动端div纵向排列，因此使用@media screen and (max-width: 950px)媒体查询实现适配，但启用触控模拟后该适配规则不生效，请问该如何解决这个问题？

问题原因 #

适配失效的核心原因是缺少移动端必备的viewport元标签。移动端浏览器默认会使用宽度为980px的虚拟视口渲染页面，就算开启触控模拟小屏设备，实际布局宽度还是大于你设置的950px断点，导致媒体查询无法触发。

修复方案 #

1. 在HTML的<head>标签内添加viewport配置，代码如下：

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

这段配置会告知浏览器使用设备实际物理宽度作为布局宽度，保证媒体查询可以正确识别屏幕尺寸触发适配规则。

2. 补充优化：给.main类添加overflow: hidden属性，避免浮动元素高度溢出父容器，导致布局错乱。

修改完成后重启触控模拟，即可正常触发媒体查询，实现桌面端横向排列、移动端纵向排列的效果。

内容的提问来源于stack exchange，提问作者ϻisռad Ϙasiϻ