今天吭哧吭哧整了个手机网站知识库，记下来给想自学的兄弟避坑。开头纯属脑子一热，心想这年头谁还不会搞个手机网页？结果上手直接卡在起跑线上。

从摸键盘开始

先是哆哆嗦嗦打开记事本，照着网上的例子瞎敲了个html。连标签咋闭合都记混，页面打开跟车祸现场似的。折腾半天才明白手机网页得加这行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

不加这玩意？手机上看字小的像蚂蚁撒了把盐。后来发现偷懒神器：直接扒拉别人网站的代码，右键点检查，跟抄作业似的。

手机屏幕大乱斗

刚觉得能看了，用自己手机一试——按钮堆成俄罗斯方块！原来不同手机屏幕尺寸能差出银河系。连夜搜教程，学会了：

• 用替代px（比如宽度写100%而不是500px）
• 按钮别用固定宽高，试试padding撑开
• 图片统统加max-width:100%防溢出

最头疼的是iPhone那个刘海屏，顶部内容直接被啃一口。骂骂咧咧加了个padding-top:env(safe-area-inset-top)才救回来。

手指不是针尖

电脑上测试美滋滋，真机上手点链接像在拆炸弹——按钮间距太密总误触。血的教训：

• 点击区域至少48px×48px
• 链接间距塞得进一根火腿肠才保险
• 导航栏图标别玩微雕艺术

还栽过字体坑：自以为优雅的苹方字体，安卓机上秒变宋体。老老实实用system-ui字体族保命。

破浏览器逼我修仙

本以为大功告成，结果同事华为手机打开直接布局错乱。查兼容性查到眼冒金星，总结保命三板斧：

1. 老安卓机直接用-webkit-前缀
2. Flex布局比Float稳当十倍
3. CSS新特性先查caniuse再嘚瑟

最邪门的是某次上传按钮在iOS Safari死活点不动，发现要给input标签加cursor:pointer——库里的苹果玄学。

完工后想抽自己

前后折腾三个周末，成品放朋友圈收获八个点赞。回头翻笔记发现：八成时间在跟浏览器打架，两成在删!important补丁。早知道该把标题改成：《手机网站劝退指南》。

现在这堆笔记都扔在石墨文档里，想看随时找我。不过劝你先想好——这玩意儿实操起来，比母猪上树容易不到哪去！