解决移动端项目在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 扆飞翔阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 服务器部署前端项目后，刷新页面出现404

· Vue props的多类型定义报错的问题

· pc页面改为响应式布局宽度问题

· pc端页面等比缩放到移动端

· No.2.3

公告

昵称：扆飞翔
园龄： 4年3个月
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

服务端(1)

yifeixiang

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

问题描述

解决办法

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	<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>