一个网站在电脑上看起来干净整洁，在手机上打开时却可能乱作一团：文字溢出框外，图片跑到屏幕之外，菜单打不开，用手指难以点到按钮，页面左右晃动，各区块相互重叠。这并不是因为手机”坏了”，而是因为网站没有按照适配小屏幕的方式来设计。这个问题的名字叫做缺少 responsive（自适应）设计。本文我们依次讲解其症状、原因和解决方法。
这不仅仅是一个审美上的瑕疵。如今网络流量中有很大一部分来自手机和平板；许多访客第一次打开一个网站就是用手机。一个在手机上晃动、溢出、难以操作的页面，会导致访客立即离开网站，并对企业形成负面印象。因此，移动端适配也是搜索引擎评估中会纳入考量的一项基本标准。
症状：手机上究竟哪里出了问题？
桌面屏幕很宽，在水平方向上提供了很大空间；而手机屏幕则窄、竖向且为触控。一个按宽屏搭建的页面在试图塞进窄屏时布局会错乱，并出现一些典型症状：
- 文字溢出框外，或者小到无法阅读。
- 图片超出屏幕宽度，右侧被截断。
- 页面水平晃动；用户不得不向右拖动。
- 菜单打不开，或者链接彼此挤在一起。
- 按钮之间过于靠近，用手指难以点到正确的那一个。
- 原本并排布置的区块相互重叠。
原因：固定尺寸与缺失的设置
大多数问题源于页面是按照桌面宽度以固定尺寸搭建的。当设计只考虑单一屏幕宽度时，在任何比该宽度更窄的屏幕上，元素都无法放进各自的位置。最常见的原因如下：
- 固定的 px 宽度：如果给某个区块设定了像 width: 1200px 这样的固定宽度，那么在一部宽度为 380 像素的手机上，该区块就放不进屏幕，从而导致水平晃动。
- 缺少 viewport meta 标签：如果页面的 head 部分没有 viewport meta 标签，手机就会试图以桌面宽度打开页面再缩小；一切都会显得又小又错位。
- 未使用 max-width 的图片：如果不给图片设定上限，它就会以原始尺寸打开并超出窄屏。
- 完全没有考虑移动端布局：设计只针对宽屏完成，未定义在小屏幕上各元素该如何排布。
解决方法：流式且自适应的布局
解决办法是让页面不按固定尺寸、而是按屏幕宽度以流式方式表现来搭建。在这种方式下，设计不会被锁定在单一宽度上；元素会根据屏幕尺寸重新排布，多列会上下叠放，文字和留白会按比例调整。需要采用的基本方法有：
- viewport meta 标签：在页面的 head 部分加入承载 width=device-width, initial-scale=1 值的 viewport meta 标签。这能让手机以自身的真实宽度显示页面；这是 responsive 设计的首要前提。
- 相对单位：使用百分比、rem、vw 等相对单位来替代固定的 px；元素会与屏幕宽度成比例地放大和缩小。
- flexbox 与 grid：各区块用 CSS 的 flexbox 和 grid 布局来排布；在窄屏上原本并排的元素可以自动上下叠放。
- media queries：用媒体查询为特定屏幕宽度以下定义不同的规则；例如菜单在移动端变为汉堡按钮，列数减少。
- 图片上的 max-width：给图片设定 max-width: 100%；这样图片永远不会宽于其容器，也就不会溢出屏幕。
触控操作与防止水平晃动
在移动端，设计不仅要”放得下”，还要用手指操作起来舒适。鼠标指针能够精准地点到很小的目标，而手指更大且精度更低；因此一个在桌面上看起来毫无问题的布局在触控上可能并不好用。为此还需额外注意几点：
- 足够的按钮尺寸：可点击的元素要设计成方便用手指点按的大小，并在彼此之间留出足够间距；避免点错元素。
- 切断水平晃动：页面主体绝不应产生水平滚动。较宽的内容（表格、代码块、宽图片）要放入自身可滚动的容器中。
- 可读的文字大小：文字要保持在手机上无需放大即可阅读的尺寸。
要验证一个网站在移动端是否正常工作，需要在真实设备上测试，或使用浏览器开发者工具中的设备模拟来测试。重要的是不能只看某一款手机型号，而要看不同的屏幕宽度；因为从一部小手机到一台大平板，布局应当以流式方式变化。通过尝试左右滑动页面来检查是否存在水平晃动，通过用手指点按按钮来检查触控目标是否足够大，能够尽早发现大多数问题。
总而言之，在手机上显示错乱的网站，大多是按固定尺寸、只考虑单一屏幕搭建出来的。viewport 标签、相对单位、用 flexbox/grid 搭建的流式布局，以及用 max-width: 100% 加以限制的图片，能让同一个页面无论在电脑上还是在手机上都显示得当。由于如今大部分访问都来自移动设备，一个网站在移动端正常工作已不再是可选项，而是一项基本要求。
相关服务：网页设计与软件、软件与 PC 应用
Leave a Reply