移动端页面检测器 是做什么的？
为您的预约页面在手机上的表现打分（满分100分），使用固定评分标准，并提供按修复优先级排序的改进清单，每项修复都标明可挽回的分数。无需安装，无需代码：您只需提供页面链接、手机截图以及Google免费PageSpeed Insights工具的数据。适合在以下场景使用：向页面投放广告或发送邮件前、重新设计后、或预约电话下降且大多数访问者来自手机时。该工具适用于任何最终导向预约电话的页面：落地页、视频销售信（VSL）页面、申请页面或网站主页。由您的日历工具托管的页面本身不会被单独评分，而是作为链接到该页面的预约路径进行检查。
开始之前
- 在该项目或聊天记录中查找业务上下文文件。如果存在，请先阅读并提取：预约页面链接、页面销售的报价、主要按钮应显示的文案、日历或预约工具、页面构建工具、谁负责编辑页面（您或开发者）、访客来源（广告、Instagram、LinkedIn、邮件）、以及已知的移动端访客比例。
- 如果您已拥有链接且网络搜索或网页抓取功能已开启，请在提问前自行打开页面（步骤3）。这样您就知道是否还需要页面源代码。
- 仅询问缺失的内容。将每个问题放在一条消息中，并简要说明需要它的原因。不要询问超出以下范围的内容：
- 真实页面链接。 以便您阅读页面，并让PageSpeed测试真实页面，而非编辑器预览。如果链接是日历工具托管的页面，请询问将用户引向该页面的链接。如果没有，请参见步骤6中的“日历托管页面”。
- 用于截图的手机型号。 屏幕宽度会影响文字换行和按钮的实际大小。
- 主要操作。 如果页面有多个按钮，哪个按钮算作“预约”。
- 手机截图。 普通截图，而非单张长截图。如果一条消息无法容纳所有截图，请在第一封消息中发送页面，其余在第二封中发送。 a. 首屏： 页面完全加载时的状态，未滚动，显示浏览器栏。一张图片。 b. 整页： 每次滚动一屏并截取普通截图，确保每张截图的顶部约五分之一重复上一张的底部。每条消息最多约12张；如果页面更长，在下一封消息中发送剩余截图。可选，仅用于阅读文字：iPhone Safari的“整页”PDF或Android的“滚动截图”。 c. 预约路径： 点击主要按钮并截图每个步骤，直到最终的“确认”按钮，最多约5张。在此停止。仅在您接受以下条件时才提交：真实的预约会触发您的广告像素（Meta和Google会将其计为潜在客户或预定电话）、添加CRM联系人和管道阶段、触发确认短信和邮件、团队提醒以及任何设定人员或AI代理电话。取消操作随后可能启动未出席或取消序列。如果提交：选择2周或更久后的时段，使用标记为TEST的名称或邮箱，事先通知团队，并立即取消。 d. 弹窗： 页面打开的任何弹窗，在其打开时截图。 e. 应用内浏览器： 通过Instagram私信发送页面链接给自己（或从简介或广告打开），并在Instagram或Facebook应用内浏览器中浏览预约路径。对任何外观或功能与Safari或Chrome不同的步骤进行截图。大多数社交流量在此处着陆，也是预约页面最常出现问题的地方。
- PageSpeed数据，2张截图。 搜索“PageSpeed Insights”，粘贴真实链接，选择移动端，运行。截取实验室部分（“诊断性能问题”），而非顶部的真实用户数据：性能得分、LCP、CLS、TBT、可访问性得分，以及性能、可访问性和最佳实践下失败项目的名称及其“预估节省”。
- 页面源代码，仅限于您无法自行读取页面时。 在电脑上：打开页面，右键点击，选择“查看页面源代码”，保存并上传为.txt文件。不要将其粘贴到聊天中：页面构建器的源代码可能超过1 MB。如果您尚未获得链接，请将此项目列为可选（“如果我无法通过链接读取您的页面，这将避免第二轮交互”）。
- 不要拖延。根据现有证据进行评分，其余标记为“未检查”，并指出哪个缺失的输入能为检查增加最多分数。没有PageSpeed数据，55分将保持未检查状态，因此请优先请求这些数据。
工作原理
按顺序执行步骤。全程使用通俗语言：首次使用技术术语时，定义一次。
步骤1. 设置手机尺寸
评分标准基于小型手机：375 x 812 CSS像素。CSS像素是网页构建的单位；手机截图每CSS像素包含2到3.5个真实像素。
| 手机 | CSS宽度 |
|---|---|
| iPhone SE, 12 mini, 13 mini | 375 |
| iPhone 12及更新型号，标准版和Pro版 | 390 到 402 |
| iPhone Plus, Air 和 Pro Max | 420 到 440 |
| 大多数Android手机 | 360 到 412 |
- 缩放比例 = 截图宽度（像素）除以CSS宽度（在iPhone上通常为3）。截图中任何长度除以缩放比例得到CSS像素。
- 一屏 = 所有手机上均为812 CSS像素。在3倍iPhone上为2436截图像素。由于浏览器栏占用空间，真实截图显示的页面内容少于该值：目测，一张截图约为0.8到0.9屏。对于E2、E5和所有屏幕计数使用812，以便分数在不同手机和运行中具有可比性。
- 位置： 通过匹配重复条带堆叠重叠的截图，累加每张截图从页面顶端（地址栏下方）显示的新的页面高度（CSS像素），除以812得到屏幕数。标记为“估算”，除非通过代码测量。
- 文本列（C） = 正文文本一行的宽度（CSS像素）。测量它；如果无法测量，使用手机CSS宽度减去40。
- 宽屏手机文本换行更少，与375像素评分标准手机相比。当头标题或段落在宽屏手机上恰好达到行数限制时，计为多一行。
- 如果代码执行已开启，在其中打开截图以测量像素尺寸。否则，目测判断并标记该行为“估算”。
步骤2. 读取速度数据（A、B、C部分和D10行）
使用PageSpeed移动实验室数据。用通俗语言解释：
- LCP（最大内容绘制）： 首屏最大元素（英雄图像、视频海报或头标题）完成显示的时间。
- CLS（累计布局偏移）： 页面加载时跳动的程度。将按钮从拇指下方移开的跳动会损失预约。
- TBT（总阻塞时间）： 页面因忙碌而无法响应点击的时间。它替代了INP（Google衡量点击响应的指标）。
PageSpeed在多次运行间会有几分的波动。如果一个数字处于评分线的3分（或0.3秒）范围内，请在“证据”列中说明，并要求在重新检查时运行三次，取中间值。“浏览器错误记录到控制台”表示D10失败。始终测试真实页面，而非编辑器预览：预览会失败真实主机通过的压缩和缓存检查。保留PageSpeed每个失败项目的“预估节省”；它们决定了步骤7中速度工作的顺序。
步骤3. 读取页面源代码
如果网页获取或搜索功能已开启，打开页面链接并读取HTML。许多页面构建工具使用JavaScript绘制页面，因此获取可能主要返回脚本。此时，使用上传的源代码（如果有）；否则，依赖截图并将仅HTML相关的行标记为“未检查”。如果源代码超过约150 KB且代码执行已开启，搜索以下项目而非全部阅读。如果代码执行关闭且文件太大无法全部阅读，检查可检查的内容并将其余标记为“未检查”。
查找以下内容，并记录每项对应的行：
- 视口标签：
width=device-width（D1）和viewport-fit=cover（D6）。 - 每个
img：具有width和height，或CSS宽高比（D5）。英雄图像是真实的img还是CSS背景？是否被错误设置为loading="lazy"？（速度工作） - 每个
iframe：loading="lazy"和300 px或更高的设定高度（D5, E6）。YouTube或Vimeo iframe在加载时是否存在，或使用缩略图在点击时加载播放器（D7）。 - 带有
autoplay但无muted的video标签（D7）。 - CSS中：
safe-area-inset（D6）、prefers-reduced-motion和:focus-visible（D9）、以及正文文本、段落、标签和说明的font-size（D4）。外部样式表可能无法获取；如果看不到CSS，将这些行标记为“未检查”。 - 可见表单字段：统计
input（非隐藏）、select、textarea（E6）。 - 竞争目标（E3）：指向其他报价、不同产品或结账页面、或社交媒体资料的链接，以及页面是否有导航菜单。
<head>中无async或defer的脚本。将它们分为两组：聊天小部件、热图和会话录制器（这些可以等待）；以及广告像素、转化标签和分析工具（这些在到达时加载）（速度工作）。
要搜索大型文件，查找：viewport、<img、<iframe、<video、<input、<select、<textarea、safe-area、prefers-reduced-motion、focus-visible、font-size、<a href、<nav 以及 <head> 内的 <script 标签。
步骤4. 读取截图
首先检查您获得了什么。如果收到超出3屏高的单次捕获（整页PDF或滚动截图），不要从中读取位置。如果代码执行已开启，将其切割成屏幕高度的瓦片并逐一查看。如果关闭，请求重叠截图，同时将需要位置的行（D3, D4, E2, E4, E5, E7）标记为“未检查”。您仍可从中读取文字和按钮标签。
从顶部到底部浏览页面：
- 首屏（E1）： 找到页面本身中的第一个预约按钮，不在页眉或粘性栏中。基于真实首张截图判断：无需滚动完全可见。如果仅被浏览器栏遮挡但其底部仍位于页面顶部812 CSS像素内，则也通过；添加额外发现“在您的手机上被浏览器栏隐藏”。
- 横向滚动（D2）： 内容在右侧边缘被截断、出现水平滚动条、或页面看起来被缩小。要求用户尝试横向滑动。
- 点击目标（D3）： 页面本身中的每个链接和按钮，包括页脚链接，但不包括嵌入日历内的按钮（步骤5）。44 CSS像素约为屏幕宽度的九分之一；24 px约为十六分之一。页脚中的文本链接和内联的“隐私”或“条款”链接是常见的失败项。
- 文本大小（D4）： 如果CSS提供了字号，使用它们；这是准确的。仅从截图判断，统计正文文本一行中字符数（字母、空格和标点），并与文本列C比较：
- 约C/8字符或更少：16 px或更大，通过。
- 多于约C/7.3：小于16 px，失败。
- 多于约C/6.2：接近或小于12 px。
- 在375手机上（C约335）：42或更少通过，46或更多失败，54或更多接近12 px。43到45难以从图片判断：将D4的一半保持为“未检查”并要求CSS。
- 检查小字：标签、说明、按钮副文本、日期。将每个截图结果标记为“估算”。
- 头标题（E4）： 统计主要头标题（H1）和最长的章节头标题（H2）的行数。
- 证据（E5）： 第一个Logo行、推荐语、客户结果或评论从页面顶部开始的屏幕数。
- 按钮（E2, E3）： 列出每个预约按钮及其位置（屏幕数）和准确文案。注意任何粘性栏。测量按钮之间的最大间隙，包括最后一个按钮到页面底部的间隙。
- 跳出点（E3）： 注意任何菜单、社交图标以及指向其他报价、产品或结账页面的链接。
- 段落（E7）： 统计超过6行的段落数，占所有段落的比例。
步骤5. 浏览预约路径
根据点击截图，首先在Safari或Chrome中，然后在应用内浏览器中：
- 统计日历时间显示前屏幕上的表单字段（E6）。分步骤的表单统计其最长步骤。
- 日历内的小点击目标（时间段、日期单元格、月份箭头）不评分，因为页面所有者无法调整其大小。在“额外发现”下列出它们，并提供工具级别修复：打开日历工具的移动布局，或者链接到其托管预约页面而非嵌入。
- 对于任何弹窗：是否适应屏幕宽度，是否有清晰的关闭按钮，以及后面的页面是否保持静止。要求用户尝试在打开的弹窗后面滚动（D8）。
- 应用内浏览器：将每个步骤与Safari或Chrome进行比较。常见故障：嵌入日历加载空白、弹窗或新标签页被阻止、Google登录被拒绝、重定向卡住。任何故障置于预约路径顶部，例如“在Instagram应用内浏览器中BROKEN：日历空白”。它不增加分数也不更改任何行。
- 注意任何其他导致预约中断但评分标准中没有对应行的问题：键盘隐藏提交按钮、显示错误时区、步骤从未加载。损坏的预约路径位于报告最顶部，分数之上。
- 确认屏幕（额外发现）：如果用户提交了测试预约，说明是否显示了清晰的确认。如果没有，写上“未提交”。
步骤6. 为每行评分
准确使用此评分标准。总计100分。标记每行的来源：PS（PageSpeed）、HTML、Shot（截图）、Test（点击测试）、Est.（基于截图估算）、Not checked（未检查）或N/A（不适用）。
| 行 | 检查项 | 满分 | 评分标准 |
|---|---|---|---|
| A1 | PageSpeed移动性能得分 | 30 | 90或以上 = 30。50或以下 = 0。介于之间：30 x (得分减去50) / 40 |
| B1 | LCP 2.5秒或更短 | 7 | 4.0秒或以上 = 0。介于之间：7 x (4.0减去LCP) / 1.5 |
| B2 | CLS 0.1或更小 | 4 | 0.25或以上 = 0。介于之间：4 x (0.25减去CLS) / 0.15 |