移动端police-div无法铺满屏幕的问题求助

以下是针对你遇到的police-div无法在移动端全屏问题的具体排查和解决步骤：

1. 重置全局默认边距与视口 #

浏览器默认会给html和body设置边距，加上缺失视口标签会导致移动端渲染异常，先补上这两项：

<!-- 头部必须添加的移动端视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 清除全局默认边距，避免挤压元素宽度 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* 防止出现横向滚动条 */
}

2. 修正目标div的盒模型与宽度 #

确保police-div的宽度不受盒模型和固定值限制：

.police-div {
  width: 100%; /* 或者用100vw，注意vw会包含滚动条宽度，需配合overflow-x:hidden */
  box-sizing: border-box; /* 让padding、border算在宽度内，不撑开元素 */
  margin: 0;
  padding: 0;
}

3. 检查父元素约束 #

如果police-div的父元素设置了width、max-width或者overflow属性，会直接限制它的宽度。需确保父元素没有固定宽度限制，或者给父元素也添加：

.police-div的父元素选择器 {
  width: 100%;
  box-sizing: border-box;
}

快速排查技巧 #

• 给police-div加个临时背景色（比如background: red），直观查看元素的实际宽度范围
• 用浏览器开发者工具（F12）的元素检查功能，查看police-div、父元素、html/body的盒模型面板，定位哪一层存在多余的margin/padding或宽度限制

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