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

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}' );