以 1px 宽度呈现网页的最佳方式

Posted 2023-03-29

【中文标题】以 1px 宽度呈现网页的最佳方式

【英文标题】：Best Way to render Web Page at 1px Width

【发布时间】：2013-09-11 04:52:04

【问题描述】：

一位客户要求将响应式网页设计缩小到 1px 宽度（他们最初要求 0px，但我能够说服他们这实际上并不存在）。

显然，我无法渲染字符或图像，因此我的想法是使用页面高度下方的像素以摩尔斯或二进制代码对所有内容进行编码。这可以仅使用 CSS 完成吗？

【问题讨论】：

有兴趣看看这是否可行

哪个浏览器允许 1px 宽度的视口？

我认为我的客户正在考虑 iframe。

我更好奇他们为什么坚持需要 1px 宽度响应？万一智能蚂蚁浏览网页？

您或您的客户是否在欺骗我们？

【参考方案1】：

这是我见过的最愚蠢的问题！

我将保留我对你和你的客户的侮辱，纯粹是因为这很有趣。它对人类没有用处或不可用，但有可能使网页宽 1 像素。

... except 对于图像，显然您不会在 1px 处很好地看到图像，因此您可以将它们缩放到单个像素或完全隐藏它们。我会让你决定的。

...也没有桌面浏览器可以有这么小的视口。但是可以有一个 1px 宽的 iframe。

...也你和你的客户将无法阅读这个，它将是莫尔斯或二进制（或其他）。 完全不是人类可读的。

---

使用媒体查询仅在 1px 处显示二进制文件

使用当今大多数响应式开发人员都在使用的 CCS 媒体查询，添加如下内容：

@media screen and (max-width: 1px)  

您需要在这些卷曲中添加您的 CSS。

然后旋转定位

我已经做了一个你想要做的例子，即旋转和定位文本，使其位于屏幕左侧的一半。

检查JSfiddle（我把它放在一个div中，隐藏溢出来模拟一个1px宽的寡妇）。如果文本内容是动态的，您可能需要使用 javascript。

使用条码字体

如果您查看上面的 JSfiddle，可能并不明显，即使是训练有素的机器也无法读取它。字符的宽度不同，有些字符看起来相同，例如 l,i 和 t 具有相同的宽度和中心像素线。

因此您可能希望使用像this 这样的条形码字体。

最终的结果会是这样的：