前言

果然前端一个主要任务就是应对不同的设备、操作系统和浏览器。最近一直在做要大屏展示的事，来了个 PC 端的活顺势就用大屏的方式去做了，快下班了仔细一想真是蠢爆了。

大屏

以我的经验大屏一般指固定了比例（甚至固定了尺寸的）屏幕，一般这种屏比较大，设计图最小也得是 1920*1080 的。开发这种用在大屏的系统在处理屏幕尺寸适配上是很简单的，但这种系统一般花里胡哨的写各种炫酷的样式和特效比较复杂。

用在大屏的系统一般只要完美按照设计图还原就行，这种情况只要做个复读鸡直接把设计图的尺寸复制粘贴过来就好了。

如果需要固定为设计图的比例缩放到窗口大小的话可以考虑下面几种方法：

1. 用脚本将完美按照设计图还原的页面用 transform 缩放（注意：一倍的图片、Canvas 放大会模糊）。
2. 全部长度单位用 vw（这种方式要注意 Chrome 最小字体大小为 12px，这个需要去 Chrome 设置-外观里面设置）。
3. 全部长度单位用 rem，用脚本改变根元素font-size（同样要注意最小字体大小）

如果系统既想用在大屏又想支持响应式就要具体问题具体考虑了。总得来说比较难搞，因为针对大屏的设计一般不能滚动并且内容比较满。

一般会有人过来问以下问题：

• Q: 怎么有滚动条，怎么显示不全？
  一般在固定了比例以 cover 模式（内容铺满视口，超出部分出现滚动条或隐藏）展示时会问。

• A: 您看按下 F11 全屏显示没有就滚动条/显示全了。因为浏览器上面有各种栏、电脑下面有任务栏，展示的时候全屏就是没有就滚动条/全的。

• Q: 怎么两边没填满？
  一般在固定了比例以 contain 模式（内容全部显示，填不满的部分留下背景或空白）展示时会问。

• A: 您看按下 F11 就满了。因为这个系统是针对全屏的比例开发的。

PC 端

PC 端和大屏真要比较的话区别有：大屏是给人看的，而 PC 端是给人用的。大屏一般都是一屏展示，PC 端可以有滚动条。

考虑到易用性 PC 端的系统一般不会在很宽的视口上变得很大，一般内容会控制在 1000 - 1200 CSS 像素之间。因为 CSS 的一个像素是表示在 96 个点表示一英寸时，在距离一臂的地方观察的大小（现在都是高 DPI 的显示器这个前端没法控制，我们要假设用户调整好了系统的分辨率、系统的缩放或者浏览器缩放）。

算一下， 1000 - 1200 CSS 像素差不多是在 12 - 14 寸的笔记本全屏看比较舒服的大小：

1> 1000/96/16*Math.sqrt(9*9+16*16)
211.951536296019412
3
4> 1200/96/16*Math.sqrt(9*9+16*16)
514.341843555223296

移动端

移动端浏览器本身已经提供了通过放大缩小视口浏览 PC 端网页的方案。但进行移动端开发时通常要添加<meta name="viewport" content="width=device-width, initial-scale=1.0">标签让视口和设备屏幕一样宽。

不同屏幕尺寸和分辨率的问题在移动端更为明显，因为移动设备有尺寸差别很大的手机和平板，并且可以旋转为纵向和横向，并且通常是高清屏。

移动端开发还需要了解如何使用各种 Web API 调用移动设备的功能。虽然 PC 端开发也可能需要使用自定义的协议打开应用，调用一些定位和消息推送的 API。但移动端开发要用到的 API 明显要更多。

所以要解决上面的问题需要综合应用：

• CSS: 长度单位，流式布局，弹性盒布局，媒体查询...
• Web API
• ...