```html

网站制作手机版

去年帮一个开咖啡馆的朋友改官网，电脑上看着挺精致，制作用手机一打开——导航栏挤成三行，手机图片撑破屏幕，网站点个“菜单”要放大三倍才能戳中。制作他皱着眉头说：“我客人九成用手机看，手机这等于把门面给砸了。网站”那天下午我把他网站的制作手机版从头到尾重做了一遍。这不是手机个例。很多网站制作时只盯着桌面浏览器，网站手机端随便糊弄，制作结果流量全从指缝漏走。手机

手机版网站制作，网站第一件事是制作把“响应式”这三个字从口号变成肌肉记忆。别再用固定像素宽度写 width: 1200px 了，手机换成百分比或者 max-width。我见过一个摄影师的个人站，桌面端全屏大图很震撼，手机端也全屏？一张图加载八秒，用户早跑了。后来改成 width: 100%; height: auto;，再配合 srcset 给不同屏幕密度送不同尺寸的图，加载时间从八秒掉到一秒半。就这么一个改动，跳出率降了四成。

导航是手机版最容易翻车的地方。桌面端横向排开的五六个菜单项，在手机上根本塞不下。有人偷懒直接让它们换行，结果占掉半个屏幕。正确做法是收进一个汉堡图标里——但别以为放个图标就完事。我测试过十几个网站，有的汉堡菜单点开之后，关闭按钮藏在屏幕外，用户只能刷新页面。这种细节，写代码的人自己不用手机测，根本发现不了。我自己的习惯是：做完任何页面，先扔到手机上用拇指划拉五分钟，能顺畅走完主流程才算过关。

触控目标的大小，很多人不当回事。苹果的人机界面指南建议最小44×44像素，谷歌的Material Design建议48×48。我见过一个电商网站，手机版“加入购物车”按钮只有30像素高，旁边还紧挨着“立即购买”。用户想加购，结果点到购买，直接跳转支付页，骂娘的心都有。改起来简单：给按钮加 padding: 12px 20px;，再把两个按钮之间留出至少16像素的间距。这些数字不是拍脑袋来的，是无数手指戳出来的经验。

字体大小也是重灾区。桌面端用14px看着正常，手机上14px跟蚂蚁一样。我一般把正文设在16px到18px之间，行高1.6左右。有人喜欢用 vw 单位让字体随屏幕缩放，听起来聪明，实际用起来——大屏手机上字大得离谱，小屏手机上又小得可怜。老老实实用 rem 配合媒体查询，在 html 上设基准字号，比什么花活都稳。

表单在手机上更得小心。输入框类型要写对：邮箱用 type="email"，电话用 type="tel"，这样手机键盘会自动切换，用户少按好几次切换键。还有 autocomplete 属性，加上之后浏览器能自动填充姓名、地址，转化率能差出百分之十几。这些细节不写进代码里，用户不会告诉你哪里难受，他们只会直接关掉页面。

最后说个容易被忽略的点：手机版网站的测试不能只用Chrome的开发者工具模拟。那个模拟器里的触摸事件是假的，滚动惯性是假的，甚至有些CSS属性在真实手机浏览器上表现都不一样。我桌上常年摆着一台旧安卓和一台旧iPhone，专门用来测最低端的设备。你的用户可能还在用三年前的千元机，你的网站在那上面能不能跑顺，才是真正的及格线。

网站制作手机版，说到底不是技术问题，是态度问题。你愿不愿意把自己当成一个用拇指在公交车上、在厕所里、在排队时打开你网站的人。那个人的耐心只有三秒，手指粗得像香肠，网络时好时坏。为他做网站，桌面版自然也不会差。