移动端友好页面必须正确设置viewport标签于head最顶部、采用语义化html结构、保障触控可操作性及内容可见性，否则将被搜索引擎降权；仅加viewport标签不够，需确保首屏渲染即可用、文字清晰、按钮可点、无js阻塞且内容无需脚本即可呈现。
移动端友好页面不等于“加个 <meta name="viewport"> 就能过审”，搜索引擎（Google、百度）的移动优先索引会真实模拟手机访问，抓取首屏渲染状态。如果页面在 375px 宽度下文字看不清、按钮点不到、内容被截断或 JS 阻塞了视口解析，哪怕桌面端完美，也会被降权。
viewport 标签必须写对、放对、第一时间生效
这是所有适配的起点，也是最容易翻车的第一步。错误写法直接导致 iOS Safari 文字模糊、安卓 WebView 渲染错位，搜索引擎抓到的就是“不可用状态”。
-
<meta name="viewport" content="width=device-width, initial-scale=1">是唯一推荐写法；user-scalable=no和maximum-scale=1属于可访问性违规，百度和 Google 明确不鼓励 - 必须写在
最顶部，不能包裹在<script></script>或条件注释里，更不能靠 JS 动态插入——DOM ready 时页面早已渲染完毕 - 禁止硬编码
width=320或initial-scale=0.5：前者会让高 DPI 设备（如 iPhone 14 Pro）把 CSS 像素强行压缩到 320，文字小得无法识别；后者触发强制缩放，破坏原生阅读体验
HTML 结构必须支持流体布局与触控优先
搜索引擎会解析 DOM 判断“是否原生适配移动设备”。语义缺失、交互元素非原生、布局依赖固定宽度，都会被识别为“桌面版硬改”，即使视觉上没毛病。
- 主内容必须包裹在
<main></main>内，且该标签内第一个<h1></h1>被 Google 移动优先索引当作页面核心主题——别把它藏在<div class="title"> 里 <li>按钮、链接等交互区域必须用 <code><a></a>或<button></button>，禁用<div onclick="...">；否则屏幕阅读器无法识别，搜索引擎判定为“不可操作” <li>避免用 <code><table> 布局正文内容，尤其当单元格设了 <code>width: 200px这类固定值——小屏下必然溢出或横向滚动，而搜索引擎会记录“首屏出现水平滚动条”作为负面信号响应式 CSS 必须真正“移动优先”，不是伪响应式
很多项目号称响应式，实际是桌面样式打底、再用
@media (max-width: 768px)补丁覆盖。这种写法在移动优先索引下极易漏掉关键样式，导致首屏文字重叠、按钮挤成一条线。- 基础 CSS（无媒体查询）必须面向最小屏：默认单列、
width: 100%、font-size: 1rem或1.2rem，确保 iPhone SE（375px）也能正常阅读 - 所有增强逻辑只用
@media (min-width: 768px)递进，不用max-width降级——比如侧边栏默认显示，大屏才用display: flex并排，而不是默认display: none再 show 出来 - 触摸目标尺寸至少
44px × 44px（iOS 指南），CSS 中别写死padding: 4px；用rem或em，并配合touch-action: manipulation提升点击响应
首屏内容必须无需 JS 即可完整呈现
移动优先索引抓取的是静态 HTML 渲染快照，如果核心文案、导航、CTA 按钮全靠 JS 注入，或者被
v-if/ngIf控制，搜索引擎看到的就是空白或骨架屏——这等于告诉算法“这个页面对移动用户不可用”。- 关键内容（如产品标题、价格、立即购买按钮）必须存在于初始 HTML 中，不能依赖
fetch()或组件懒加载 - 图片必须带
alt属性，且首屏图片建议用<img src="...">直接加载，而非 JS 动态设置src——延迟加载只适用于非首屏图片 - 避免在
引入阻塞渲染的第三方 JS（如未加async或defer的统计脚本），它会推迟 viewport 解析和首屏绘制
真正难的不是写几行 media query，而是让整个 HTML/CSS/JS 流程默认就为小屏服务：从
<meta>解析开始，到 DOM 构建、样式计算、首屏渲染，每一步都不能假设“用户会放大看”或“JS 会补救”。漏掉任意一环，搜索引擎看到的都不是“移动端友好”，而是“勉强能打开”。 - 基础 CSS（无媒体查询）必须面向最小屏：默认单列、
