安卓网页和普通网页，安卓网页骨子里是安卓网页两套逻辑。

桌面浏览器里，安卓网页你用鼠标点击、安卓网页悬停、安卓网页滚动，安卓网页页面可以很重，安卓网页加载慢一点用户还能忍。安卓网页安卓网页不行。安卓网页手机屏幕只有巴掌大，安卓网页手指粗，安卓网页网络可能在地铁里断掉。安卓网页一个按钮如果没做触摸反馈，安卓网页用户会以为没点上，安卓网页然后疯狂戳，安卓网页最后直接关掉。

我最早意识到这件事，是做一个商品列表页。桌面端用 hover 显示操作菜单，鼠标移上去就出来，很优雅。搬到安卓上，手指按下去，菜单弹出来，手指一抬，菜单又没了。用户根本点不到里面的按钮。后来改成点击展开，加 200 毫秒延迟判断是滚动还是点击，才勉强能用。

安卓网页的点击区域，至少 48×48 像素。这是 Google 在 Material Design 里给的建议。不是审美问题，是物理问题。手指指尖接触屏幕的面积，比鼠标指针大得多。你把链接做成一行小字，桌面端没问题，安卓上就是灾难。我见过一个电商站，商品标题的链接只有 16 像素高，用户反复点不中，评论区全是骂的。

viewport 这个 meta 标签，很多人复制粘贴就完事。<meta name="viewport" content="width=device-width, initial-scale=1"> 这行代码确实管用，但它只是起点。安卓设备的屏幕密度差异极大，从 320dpi 到 560dpi 都有。你用 px 写死一个 300px 宽的图片，在低密度屏上占半屏，在高密度屏上可能只占三分之一。用 rem 或者 vw 更稳。我习惯把根字号设成 16px，然后所有尺寸用 rem，改起来方便。

触摸事件和鼠标事件混在一起，坑更深。安卓上，touchstart 和 click 之间有个 300 毫秒的延迟，浏览器要判断你是单击还是双击缩放。现在多数现代浏览器加了 <meta name="viewport" content="width=device-width"> 之后会去掉这个延迟，但老设备上还是存在。解决办法是用 touch-action: manipulation 或者 fastclick 这类库。我现在的做法是直接用 pointer events，一套代码同时处理鼠标和触摸，省心。

滚动性能是另一个分水岭。桌面端滚动卡顿，用户可能忍了。安卓上，滚动掉帧直接让人头晕。position: sticky 在安卓低端机上表现不稳定，有时候粘不住，有时候闪。能用 flex 布局解决的，别用 fixed。能用 transform 做动画的，别用 top/left。硬件加速不是万能的，但不用它，动画基本没法看。

还有一个细节：安卓网页的字体。系统默认字体是 Roboto，但国产手机厂商会换成自己的字体，比如华为的 HarmonyOS Sans、小米的 MiSans。你设了 font-family: Arial，安卓上可能根本不生效。我一般写 font-family: system-ui, -apple-system, sans-serif，让系统自己选。行高至少 1.5，字号至少 16px，不然中文挤在一起，读起来费劲。

表单输入更麻烦。安卓键盘弹出来，会把页面顶上去，有时候输入框被遮住。用 position: fixed 的底部按钮，键盘一弹，按钮跟着飘。后来我改用 flex 布局，让内容区域自动伸缩，键盘弹出时只压缩内容区，按钮不动。输入框的 type 也要写对，type="tel" 弹数字键盘，type="email" 弹带 @ 的键盘，用户少切一次键盘，转化率就高一点。

安卓网页不是桌面网页的缩小版。它是一套独立的交互环境，手指代替鼠标，网络不稳定，设备碎片化严重。你按桌面思维做，用户就用脚投票。按触摸思维做，哪怕界面朴素一点，用起来顺手，留存率自然上来。

(责任编辑：知识)