内容摘要：手机网站开发，第一件事就是放弃“把桌面网页缩小”的想法。2010年那会儿，我还在用媒体查询硬撑，iPhone 4的320px宽度让三栏布局直接崩成俄罗斯方块。现在？移动端流量早就超过桌面，但很多开发者

手机网站开发，手机第一件事就是网站放弃“把桌面网页缩小”的想法。2010年那会儿，技术我还在用媒体查询硬撑，手机iPhone 4的网站320px宽度让三栏布局直接崩成俄罗斯方块。现在？技术移动端流量早就超过桌面，但很多开发者还在用viewport标签糊弄——他们不知道width=device-width后面不加initial-scale=1，手机iOS Safari会偷偷把页面放大到980px再缩回来，网站字小得像蚂蚁开会。技术

真正让手机网站跑起来的手机，是网站响应式布局的“断点思维”。别迷信Bootstrap那套12列网格，技术我见过一个电商站，手机在375px屏幕上商品卡片挤成一行三个，网站图片糊得连logo都看不清。技术后来改成flex-wrap: wrap加min-width: 280px，每行自动两个，留白刚好够手指点。断点不是随便设的——iPhone SE的375px、iPad Mini的768px、还有折叠屏展开后的884px，这三个宽度卡住，90%的设备就稳了。

触控交互是另一个坑。桌面端的hover效果在手机上就是灾难：用户点一下按钮，先触发悬停状态，再点一下才真正点击。更别提那些click事件延迟300ms的老黄历了——现在用touchstart加preventDefault，或者干脆上pointerdown，响应快得像是按钮在等你。但别滥用touchmove做滚动监听，iOS的橡皮筋效果会让你的scrollTop算出负数，页面直接跳帧。

性能这块，手机CPU比桌面弱三倍不止。一个1MB的JS包在Wi-Fi下秒开，到了4G弱网环境，解析加执行能卡出两秒白屏。我的做法是：首屏只加载关键CSS，用rel="preload"把字体文件提前拽下来，图片全部loading="lazy"，但首屏那张Hero图必须内联成base64——别怕体积大，总比用户盯着灰色占位符强。有个数据：页面加载时间从3秒降到1.5秒，某新闻站的跳出率直接掉了22%。

说到具体案例，去年帮朋友改一个餐厅菜单页。原来用position: fixed做底部导航，结果iPhone X以上机型被Home Indicator挡住，用户点不到“订座”按钮。改成padding-bottom: env(safe-area-inset-bottom)，再加viewport-fit=cover，问题消失。还有个细节：手机上的input框如果font-size小于16px，iOS会自动放大整个页面——用户填完表单，页面还卡在放大状态，得双指捏回来。改成font-size: 16px，世界安静了。

最后说个反直觉的：手机网站别追求“和App一样”。App能调摄像头、能后台推送，网页做不到。但网页有个杀手锏——分享链接即用。所以把manifest.json配好，加个theme-color，用户添加到主屏幕后，至少看起来像个轻应用。至于那些花哨的PWA离线缓存？先保证service worker不把旧版本CSS缓存半年再说。我见过最离谱的，用户反馈“按钮点不动”，一查是SW缓存了三个月前的JS，里面有个alert阻塞了主线程。

手机网站开发没有银弹。你得像对待老式诺基亚那样敬畏每一KB流量，像对待触屏手套那样理解每一次点击。调试时别只开Chrome的Device Toolbar——真机连上USB，打开Safari的Web Inspector，看看那些在模拟器里永远不出现的touchcancel事件。代码写完了，拿出去在太阳底下走一圈，屏幕反光下还能看清按钮，才算过关。