Bootstrap 页面移动设备显示异常的根源是 HTML5 Doctype 未声明或 viewport 元标签缺失；需依次设置 <!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
如果您在使用 Bootstrap 构建网页时发现页面在移动设备上显示异常、缩放失当或布局错乱，则很可能是 HTML5 文档类型未声明或视口（viewport）元标签缺失所致。以下是设置 HTML5 基础结构与关键元标签的具体操作步骤：
一、声明 HTML5 文档类型
HTML5 文档类型（Doctype）是浏览器进入标准渲染模式的前提，缺少它会导致 Bootstrap 的 CSS 和响应式行为失效，尤其在旧版 IE 中表现明显。
1、在 HTML 文件最顶部第一行添加 <!DOCTYPE html> 声明。
2、确保该声明前无任何字符（包括空格、换行、BOM 字节）。
立即学习“前端免费学习笔记（深入）”；
3、验证文件保存编码为 UTF-8 无 BOM 格式，避免 Doctype 被意外截断。
二、设置 lang 属性与字符编码
lang 属性有助于屏幕阅读器识别语言，charset 声明则确保中文等 Unicode 字符正确解析，二者共同支撑 Bootstrap 的国际化与排版稳定性。
1、在 <html> 标签中添加 lang="zh-CN" 属性。
2、在 <head> 内紧随 <title> 之前插入 <meta charset="UTF-8">。
3、确认该 meta 标签位于所有其他 <meta> 标签之前，优先级最高。
三、添加 viewport 元标签
viewport 标签控制页面在移动设备上的初始缩放、宽度适配及用户缩放权限，是 Bootstrap 响应式栅格系统生效的必要条件。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
1、在 <head> 中插入 <meta name="viewport" content="width=device-width, initial-scale=1.0">。
2、禁止使用 user-scalable=no 或 maximum-scale=1.0 等限制性参数，以免破坏可访问性。
3、若需兼容 iOS Safari 横屏旋转时的宽度重置，可追加 shrink-to-fit=no（仅限 Safari 9+）：<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">。
四、验证基础结构完整性
完整的 HTML5 + Bootstrap 基础骨架必须包含 Doctype、lang、charset、viewport 四要素，缺一不可；否则即使引入了 Bootstrap CSS/JS，其响应式类（如 .container-fluid、.col-md-6）也无法按预期工作。
1、检查最终 <head> 区域是否严格按顺序包含以下四行：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
2、确认 <html> 标签闭合位置正确，且未嵌套在其他非语义标签内。
3、使用浏览器开发者工具的「Elements」面板，查看 <html> 标签是否被自动修正为标准模式（Document Mode 显示为 Edge 或 Standards）。
