javascript - 为什么这个背景没有被正确平铺？

Question

我修改了 reveal.js 视差背景，使其大小调整为每个 PDF 导出页面平铺一次。但是，取决于 reveal.js presentation size ，平铺被弄乱了。有时瓦片高度略微偏大，这个错误不断累积。

问题:

• 是什么导致平铺弄乱的？
• 哪些演示文稿尺寸不会被弄乱？ (960x678 有效，但 960x700 无效)
• 如何修改 reveal.js 以便正确平铺所有演示文稿大小？

您可以在这里尝试一下:

• 在 Chrome 中打开以下链接并打开打印对话框 (CTRL-P)
  • > Badly tiled
  • > Tiles OK
• 查看source code (相关代码在index.html底部)

这是乱七八糟的平铺的屏幕截图:

---

最后，这是我修改 reveal.js 的方式:

我改变了这一行:

dom.background.style.backgroundSize = config.parallaxBackgroundSize;

为此:

if ( isPrintingPDF() ) {
    var slideSize = getComputedSlideSize( window.innerWidth, window.innerHeight );

    // Dimensions of the PDF pages; copied from another part of reveal.js
    var pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
        pageHeight = Math.floor( slideSize.height * ( 1 + config.margin  ) );

    dom.background.style.backgroundSize = pageWidth + 'px ' + pageHeight + 'px';
} else {
    dom.background.style.backgroundSize = config.parallaxBackgroundSize;
}

Answer 1

在 reveal.js 中，这改变了页面的大小:

        // Let the browser know what page size we want to print
        injectStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0;}' );

        // Limit the size of certain elements to the dimensions of the slide
        injectStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );