打开手机刷新闻时，明明在电脑上看排版规整的文章，挪到手机里就会出现字体太小、图片溢出屏幕、按钮点不准的问题，这种“挤牙膏”式的阅读体验，相信很多人都遇到过。如果把网页比作一间店铺，电脑是宽敞的实体店，小屏手机就是窄巷子的小铺面，怎么让商品（网页内容）在窄巷子里既摆得下又看得清？核心就是做好“网页适配小屏设备”的关键设置，下面就用生活化的例子拆解最实用的几个方法。
第一步：给小屏定“尺寸标准”，避免乱缩放
很多人可能遇到过这种情况：打开网页后，手机浏览器自动缩小整个页面，字小得要眯眼看，手动放大又只能看到部分内容，左右还得来回滑动——这是因为网页没给小屏设置专属的“尺寸规则”。
就像租店面要先量好巷宽（手机屏幕宽度），再摆货架，而不是随便拿大店的货架硬塞。这里的“量宽度”，就是给网页加一个简单的设置：viewport，翻译过来就是“视口”，相当于告诉手机：“这是给你准备的专属窗口，内容不要乱缩放，就按这个宽度来显示”。举个例子，你逛街边的奶茶店，不会把门口的招牌贴得比巷宽还宽，不然路人根本看不清，这个viewport设置就是帮网页把“招牌”控制在手机屏幕的合适宽度里，不会乱跑。
第二步：把“大组件”拆成“小块”，适配窄空间
电脑上的导航栏是一排横向的“首页、产品、关于我们”，放到手机上就会挤成一团，或者溢出屏幕——这是因为没把“大组件”改成适配小屏的布局。
好比家里的大餐桌，搬到小阳台肯定放不下，得换成折叠小方桌。网页里的这类“大组件”，比如导航栏、图片轮播图、图文区块，都要改成适合窄屏的结构：比如导航栏改成竖排的“汉堡菜单”（就是手机上常见的三条横线按钮，点一下才展开选项），图片改成宽度和屏幕一致的“自适应图”，图文区块改成上下排列的单栏布局。打个比方，你给手机发朋友圈，肯定不会放一张和电脑屏幕一样宽的图，而是会裁剪成适合手机的比例，还会加文字换行，网页的组件适配也是这个道理，把横向挤在一起的内容，改成顺着手机竖屏方向排列，看着就舒服多了。
第三步：放大“可点击元素”，别让用户点不准
手机上点网页的按钮，经常出现“想点‘购买’，结果误点旁边的‘收藏’”，这种“点不准”的问题，本质是网页的可点击元素太小太密了。
这就像便利店的收银台按钮，要是按钮做的和指甲盖一样小，收银员肯定经常按错，得改成硬币那么大才方便。网页里的按钮、链接、图标这些可点击的元素，尺寸建议至少做到48×48像素（大概和一元硬币的大小差不多），而且两个相邻的按钮之间要留至少8像素的空隙，别挤得太近。比如你手机上的微信发消息按钮，就是专门做的够大够显眼，不会点错，网页的可点击元素设置也是一样，照顾用户的手指操作习惯，不用再凑很近或眯着眼点。
第四步：统一小屏的“文字规则”，降低阅读门槛
小屏上看网页，字体忽大忽小、行间距太密或太疏，都会让眼睛很快累，这也是很多人刷手机久了眼睛酸的原因之一。
就像看报纸，小报的字太小太挤会累眼，大报的字和行间距都合适，看多久都轻松。网页适配小屏时，字体大小最好不小于16像素（大概和你手机上的默认短信字体差不多），行间距设为字体大小的1.5倍左右，段落之间再留点空隙，不要挤成一大块。另外，别用太小的字体，也别为了凑内容把字拉得太宽，就像看小说，合适的行间距能让视线自然移动，不会来回跳行。
做好这几个关键设置，网页在手机上就能从“挤成一团的杂货铺”变成“整齐舒服的便民店”，用户不用来回滑动、不用眯眼放大，自然愿意多停留。其实网页适配小屏，本质就是站在用户的角度，把电脑上的内容“平移”到手机上时，调整成适合小空间的样子——不用复杂的技术，抓准这几个小细节，就能让普通网页也能适配绝大多数小屏设备。