解决移动端项目在PC端打开后宽度占满屏幕的问题

问题描述

移动端的项目在PC端打开后，对于带有固定定位的元素，宽度沾满的整个视窗的宽度。即使body，html限制了最大宽度

<body>
    <div class="box"></div>
</body>

<style>

    body{
        max-width: 500px;
        margin: 0;
        background: #aaa;
        height: 100vh;
    }

    .box{
        width: 100%;
        height: 300px;
        background-color: #f00;
        position: fixed;
    }
</style>

解决办法

在body添加：transform: translate(0);

效果如下

posted @ 2024-10-17 20:14  扆飞翔  阅读(13)  评论(0)  编辑  收藏  举报