Question

我在缩小iFrame中的内容时遇到问题。在iframe上应用CSS transform：scale时，内容显得不清晰。（不对文本和图像进行抗锯齿）

这是我作为示例创建的一个代码笔：

<iframe id="desktop" src="https://en.wikipedia.org/wiki/Responsive_web_design" scrolling="no"></iframe>

iframe {
    width: 1600px;
    height: 992px;
    transform: scale(0.4181);
    -webkit-transform: scale(0.3181);
    -o-transform: scale(0.3181);
    -ms-transform: scale(0.3181);
    -moz-transform: scale(0.3181);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
}

https://codepen.io/front-end-developer/pen/gEPvKv

在iframe上应用变换（缩放），则iframe中的内容不会抗锯齿。是否有另一种CSS解决方案可在启用抗锯齿的情况下缩小iframe内容？

以下是创建responsive mockup的完整演示

iFrame内容上的CSS缩放使字体和图像显得清晰

0 个答案: