波仔
🕸️ 第四章 Web的普及与发展
📄 一句话概括

手机上装了浏览器，却没有鼠标——网页从此必须先在小屏上站得住，再谈大屏好不好看。

📝 本节和前面几节的关系

4-1 讲了 Web 系统能干什么，这一节讲人们用什么在访问它。载体一换，做法就得跟着换。

一、屏幕从桌上挪到了手里

iPhone 出现之后（教材写作 Phone），上网这件事从书桌挪到了口袋里。安卓手机随后跟上，两条路一起把手机变成了用得最多的上网设备。

这个变化对 Web 的影响不是屏幕变小那么简单。鼠标不见了，换成了一根手指；光标悬停提示、右键菜单、双击缩放这些桌面上的习惯动作，全都失效。

教材 4-2 把【iPhone、安卓手机、响应式】三样并列讲，讲的就是这件事的因果链：设备变了 → 交互变了 → 做法也得变。

二、谁来造这些手机

2025 年全球出货约 16 亿台手机。按厂商分：三星 21%、苹果 19%、小米 14%、OPPO 9%、vivo 8%，其余由传音、荣耀、摩托罗拉等分掉 29%。

要注意份额的分布方式：苹果只做高端，却拿走 800 美元以上市场的 65%；三星靠中低端铺得最广；小米在中国、印度、欧洲三头并进。

不同品牌的手机预装的浏览器不一样（4-3 会讲），屏幕比例和分辨率也各不相同。这就是【能不能在小屏上站住】必须由网页自己负责的原因——你没法要求用户换手机。

三、响应式：一套代码伺候三种屏

面对桌面、平板、手机三种屏幕，有两条路：各做一套，或者做一套能自己适应的。后者就是响应式设计。

响应式的做法是根据屏幕宽度设几个断点，让布局在不同断点下重新排布：手机上排成一列，平板排成两列，桌面排成三列。同一份 HTML，靠 CSS 换样子。

2026 年的主流做法叫 mobile first（移动优先）：先从手机版画起，再往大了扩。理由有两条：一是移动设备已经占全球 Web 流量的 62.66%；二是 Google 从 2024 年 7 月 5 日起，只用手机版的内容来判断排名——手机版里藏起来的内容，等于不存在。

四、动手 Demo：两条开发路线的时间账

教材 4-2 讲响应式，那就得算一算：一套适应三种屏幕，到底省了多少功夫。

desktop = ios = android = 800      # 三套独立站点，各 800 小时
responsive = 1000                  # 一套响应式，多花 25% 设计断点
total_sep = desktop + ios + android
print("三套独立站点：%d 小时" % total_sep)
print("一套响应式：  %d 小时" % responsive)
print("省下：%d 小时，约 %d%%" % (total_sep - responsive,
                                round((total_sep - responsive) / total_sep * 100)))

实跑输出：

--------------------------------------------------------------------
D2  手机把网页逼成了【先小后大】
--------------------------------------------------------------------

  教材 4-2 讲智能手机的出现。先看谁在造手机（2025 年全球出货约 16 亿台）：

  厂商        出货份额      说明
  ----------------------------------------------------------------------------------------
  三星        21%           中低端铺得最广，全球出货量第一
  苹果        19%           只做高端，但拿走 800 美元以上市场的 65%
  小米        14%           中国、印度、欧洲三头并进
  OPPO        9%            以亚洲市场为主
  vivo        8%            中国与印度为主
  其他        29%           传音、荣耀、摩托罗拉等分食

  ----------------------------------------------------------------------------------------
  手机上装的是浏览器，屏幕上却没有鼠标。这就是【响应式】要解决的问题。
  2026 年，移动设备已经占全球 Web 流量的 62.66%——接近三分之二。

  于是开发者面前摆着两条路，算一算哪条便宜：

  做法                    代码份数  设计份数  合计工时  按 1 人每天 8 小时
  --------------------------------------------------------------------------------------
  桌面、iOS、安卓各做一套 3 份      3 份      2400 h    300 个工作日，近 15 个月
  一套响应式，到处都能用  1 份      1 份      1000 h    125 个工作日，约 6 个月

  这套账里，每套独立站点按 800 小时计；响应式要一次多花约 25% 的功夫设计断点，
  但只要一套代码。省下来的：**2400 - 1000 = 1400 小时，约 58%**。

  代价也很实在：一套代码要同时伺候三种屏幕，做不好就是【哪儿都不好用】。
  所以 2026 年的做法叫 **mobile first**——先画 360 像素宽的手机版，再放大。
  原因是 Google 从 2024 年 7 月 5 日起**只用手机版内容判断排名**。

这套账的关键在乘数：每套独立站点按 800 小时算，三套就是 2400 小时；响应式一次多花约 25% 的功夫去设计断点，但只要一套代码，1000 小时。省下 1400 小时，约 58%。

省下来的不只是开发时间，还有往后每一次改版的成本——改一处，三处都跟着变。

代价也很实在：一套代码要同时伺候三种屏幕，做不好就是【哪儿都不好用】。所以响应式不是省事的办法，是把复杂度前移的办法：设计时多花脑子，之后少花人力。

30 秒实验

  1. 把浏览器窗口从最大慢慢拖到最窄，盯着你现在看的这个网页——观察它在哪个宽度开始变样。
  2. 在手机浏览器里打开一个十年前的老网站，看是否需要双指放大才能点中按钮。
  3. 找一个网站，对比它的手机版和桌面版，数一数手机版隐藏了哪些内容。

常见误区

  1. 错误：响应式就是把桌面版缩小。——纠正：响应式是重新排布，不是等比缩放。缩小只能让字变小、按钮点不中；响应式做的是一列变两列、菜单收进汉堡键这类结构性调整。
  2. 错误：先把桌面版做完，再适配手机。——纠正：现在的主流是反过来。先做手机版能逼你分清主次，也避免桌面版那一堆内容硬塞进小屏。这就是 mobile first 的意思。
  3. 错误：手机端只是少部分人。——纠正：2026 年移动设备已经占全球 Web 流量的 62.66%，接近三分之二。把手机当成次要渠道，等于把大多数访客当成次要访客。
自测三问（点开对答案） 1. 为什么手机上不能沿用桌面的交互方式？ —— 因为**输入设备换成了手指**。桌面靠鼠标悬停、右键、双击、精确点击，这些在触屏上要么不存在、要么不可靠。所以按钮要变大、间距要拉开、悬停提示要改成点击展开。 2. 响应式设计和【做两套独立站点】相比，优势在哪？ —— **一份代码、一次改版**。独立站点要维护两到三套代码和设计，改一处得改几遍；响应式改一次全平台生效。代价是设计和测试更费心，但长期账更划算。 3. 为什么 Google 的排名规则会推动 mobile first？ —— 因为 Google 从 2024 年 7 月 5 日起**只用手机版内容来判断排名**。如果手机版把某段内容藏起来了，Google 就认为它不存在——**桌面版做得再全也救不回来**。

相关笔记