前端页面pc端通过控制台切换移动端屏幕不能撑满问题解决方案

最新推荐文章于 2024-04-17 21:19:32 发布

MFG_666

最新推荐文章于 2024-04-17 21:19:32 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html Css 自适应文章标签：前端 javascript html pc端移动端适配

本文链接：https://blog.youkuaiyun.com/m0_49714202/article/details/125384462

html 同时被 3 个专栏收录

46 篇文章

订阅专栏

Css

45 篇文章

订阅专栏

自适应

12 篇文章

订阅专栏

本文介绍了如何解决移动端页面无法铺满屏幕的问题。通过将最外层div的width改为min-width: 100%并添加position: absolute，可以确保页面在移动端正确适配，实现全屏显示。详细步骤包括检查控制台，修改CSS样式，并提供了修改前后的PC端和移动端截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方案

当手机在pc端正常显示的时候,打开控制台,切换移动端屏幕,这个时候会发现,页面不能铺满屏幕,我需要给最外侧div加样式width更换为min-width:100%;
再加一个position:absolute;即可生效

未解决前

PC端如下图

在这里插入图片描述

移动端如下图

通过按键盘键F12,查看移动端适配

在这里插入图片描述

未解决前样式

一定要修改最外层div的才能生效

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

<style>
.main {
  width: 100%;
  height: 58px;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}
</style>

解决后

PC端如下图

在这里插入图片描述

移动端如下图

通过按键盘键F12,查看移动端适配

在这里插入图片描述

解决后样式

一定要修改最外层div的才能生效

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

<style>
.main {
  min-width: 100%;
  height: 58px;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  position:absolute;
}
</style>