用手机上网，你肯定点开过浏览器菜单里的那个“查看桌面网站”或者“请求桌面站点”的选项。一点，整个网页就变样了。这到底是啥原理？为啥同一个网址，能变出两个样子来？今天咱就来把这事儿聊明白。

一、为啥平时看到的都是“手机版”？

这事得从浏览器怎么跟网站“打招呼”说起。你用手机浏览器打开一个网址，浏览器会先给网站服务器发个消息，这个消息里有个东西叫 “User-Agent”。

这玩意儿就跟浏览器的“名片”一样，上面写着它是谁，用的什么设备。手机的名片上一般都会带上 iPhone 或者 Mobile 这种字眼。

// 比如iPhone的Safari浏览器名片就长这样
Mozilla/5.0 (iPhone... Mobile/15E148 Safari/604.1)

网站服务器一看到这张“名片”，立马就懂了：“哦，来的是个手机用户”。

如果这个网站做得比较人性化，它就会给你一个专门给手机看的样子，也就是我们常说的“手机网站”。这种网页一般有这么几个特点：

• 东西都是竖着排的：方便你上下滑着看。
• 字和按钮都比较大：用手指好点，看着不费劲。
• 菜单都收起来了：一般会变成一个三条杠的图标（☰），不占地方。
• 图片加载快：用的都是压缩过的图，省流量。

总的来说，这个手机版就是开发者觉得最适合你在手机上看的样式。

二、点了“查看桌面网站”又发生了啥？

当你点了“查看桌面网站”这个选项，你其实就是告诉浏览器：“别说自己是手机了，去告诉网站你是一台电脑”。

浏览器收到命令，就换了张“名片”又去访问了一次。这张新名片上，iPhone 和 Mobile 这些词都不见了，变成了电脑的标识，比如 Macintosh。

// 换上Mac电脑的名片
Mozilla/5.0 (Macintosh; Intel Mac OS X ... ) Safari/605.1.15

服务器这次被“骗”了，以为是台电脑来了，就把最原始、功能最全的电脑版网页发了过来。这就是你看到的“桌面网站”了。

三、那为啥还要留着这个功能？

既然手机版体验更好，干嘛还要多此一举整个桌面版切换呢？主要是为了解决下面这几种烦人的情况：

1. 功能被藏起来了：有的网站为了让手机版看着干净，会把一些不常用的功能藏起来甚至直接删掉。你要是急着找某个功能却找不到，切成桌面版基本就能看到了。
2. 手机版页面出错了：偶尔会碰到一些网站的手机版做得不好，排版乱七八糟或者内容显示不全。这时候切成桌面版就能凑合着用。
3. 非得看完整表格：有时候要看一些复杂的数据表或者用网站后台，桌面版那种摊开来的布局看着更直观。
4. 就是用不习惯：有些人用一个网站的电脑版用了很多年，习惯了，手机上就喜欢用回原来的样子。

所以，“查看桌面网站”这功能，就是个备用方案，把选择权给你，让你在需要的时候能看到网站最原始的样子。

四、让网页变身的背后技术

不管是手机版还是电脑版，网页用的技术都是HTML、CSS、JS这老三样。能让同一套代码变来变去的技术，就是现在做网站很重要的一个东西，叫响应式设计。

这玩意儿不是什么新技术，主要就是靠CSS里的一个叫 @media 查询的功能。你可以把它理解成一个“如果…就…”的判断条件。

开发者在写CSS样式的时候会加几句这样的代码：

/* 电脑上看，内容区域宽度是1200像素，搞成几栏并排 */
.container {
  width: 1200px;
  display: flex;
}

/* 如果屏幕宽度小于等于768像素（比如手机）*/
@media (max-width: 768px) {
  /* 内容区域就占满整个屏幕宽度，变成一长条 */
  .container {
    width: 100%;
    display: block;
  }
}

浏览器加载这个网页时，会自己寻思一下：

1. “我现在的屏幕有多宽？哦，390像素。”
2. “那不就正好小于768像素嘛。”
3. “行，那就按小于768像素的样式来显示，把内容从并排改成竖着排。”

就这样，网页自己就适应了你的手机屏幕。

总结一下

简单说，“手机网站”和“桌面网站”的切换，就是浏览器换个“名片”（User-Agent）去访问网站的小把戏。而网页能自己适应不同大小的屏幕，靠的就是“响应式设计”这个技术。

搞懂了这两点，你就明白了现在大部分网页是怎么做到在手机和电脑上都能正常显示的了。