记得以前做政府和公安的项目的时候,我们总是需要将网页适配投影仪。也就是在投影仪上投放的时候,不会出现滚动条。在当时看来,这是一种需要演示项目的特例。但是之后却发现,主流的网站全部做到了兼容投影仪。

以今天的角度看,这已经不是 『特例』 了,即使没有这个需求,我们也应当尽力去实现它。是时候好好去研究下了。

其实我之前一直不是很了解,到底怎么样,才能适配投影仪哪? Google 没有给我答案。

网页如何兼容投影仪

既然没有直接的答案,我就去寻找答案。当然不是直接带着投影仪去寻找,有过使用投影仪的同学,都会有这种体验。就是我们的电脑连接上了投影仪,屏幕就突然的变成了只有原始屏幕的中间一部分。

为什么我们的电脑连接上了投影仪会突然变成了这个鬼样子???这个就需要从投影仪的历史说起了。以下数据是我从知乎上看到的,非官方数据:

2012年1月-12月中国区投影机台数及占比

2012年1月-12月中国区投影机台数及占比

Ghost 的 markdown 居然不能直接使用表格的语法,醉了。

由此可见,91.7% 的投影仪屏比为 4:3(也就是1.33333~), 而我们大部分人的电脑屏比是 16:9。所以为了适配投影仪,链接电脑的分辨率需要作出改变。

以我的电脑为例,能够选择的分辨率有很多:

分辨率与屏比

但是能够满足 1.33333333 的只有 1024x768 与 800x600 两种。而据我观察连接上投影仪后,电脑的分辨率会切换为 1024x768 这种。所以前端在开发的过程中,如果想测试网页是否兼容投影仪,只需要将当前电脑的分辨率切换为 1024x768 即可。

从我测试来看,大部分的网站都是做到兼容 1020px 左右的。以 YouTube 为例:

网页如何兼容投影仪

也就是做到网站在 1000 左右宽度的时候,不会出现横向的滚动条即可。知道了问题的所在,那么我们该如何解决这个问题那?对于这个问题,我们需要做一点 响应式的设计。效果如下图:

网页如何兼容投影仪

在开发的过程中只有极少的网页是需要铺满全屏的,绝大部分的网站都是有一个主体的内容宽度。而这个宽度根据每个网站的 ui 设计,内容的丰富度都有这个不同。为了做到兼容投影仪,我们需要对这部分的宽度做一定的处理。

/* 以主体内容宽度 1100px 为例, 正常状态 */
html,body { height: 100%; }  
.main {
    margin: 0 auto;
    width: 1100px;
    height: 100%;
    background: blue;
}
/* 投影仪状态 */
@media screen and (max-width: 1100px) {
    .main {
        width: 100%;
    }
}