手机和电脑打印页面不同

如何解决手机和电脑打印页面不同

我有一个页面来检查用户。但是，从手机打印时，页面是不同的。

[ 
[ name: "Martin",age: 49 ],[ name: "Klaas",age: 39 ],[ name: "Piet",[ name: "Henk",age: 44 ]
}

}

我希望页面在移动设备上更小有解决方案吗？

解决方法

您可以使用特定于设备的@media 标签并在该 css 块中应用任何宽度/高度/显示等 css 选项。

/* On screens that are 600px or less,*/
    @media screen and (max-width: 600px) {
     #hid {
      width: VALUE HERE;
      max-width: VALUE HERE;
      display: VALUE HERE;
      }
    }

更改值以支持您的需求。

您可以为不同的页面大小定义不同的样式。您需要为移动设备指定所需的页面大小。

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
}

参考： https://www.w3.org/TR/css-page-3/#page-size-media-query

您好，这一定是编码错误，如果您与 css 共享代码，则调试起来会更容易。但是，确保使用正确的 CSS 进行打印通常会很棘手。可以做几件事来避免您遇到的困难。首先，将所有打印 CSS 与屏幕 CSS 分开。这是通过 @media print 和 @media screen 完成的。

通常，仅仅设置一些额外的 @media print CSS 是不够的，因为在打印时您仍然包含所有其他 CSS。在这些情况下，您只需要了解 CSS 的特殊性，因为打印规则不会自动战胜非打印 CSS 规则。您可以使用一些 js 库将 html 转换为 pdf，如下所示我希望您觉得这个答案有帮助

HTML 代码：

<div id="content">
    <!-- HTML contnet goes here -->
</div>

<div id="elementH"></div>

JavaScript 代码：

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
    '#elementH': function (element,renderer) {
        return true;
    }
};
doc.fromHTML(elementHTML,15,{
    'width': 170,'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');