手机和电脑打印页面不同

Question

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

看图： in Desktop in mobile

      @page {
    size: A4;
    margin: 0;
    background-color: #F7CAC9;
}

@media print {
    #hid {
        display: none;
    }

}

我希望移动设备上的页面更小有解决办法吗？

Answer 1

您可以使用特定于设备的@media 标签并在该css 块中应用任何width/height/display 等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;
      }
    }

更改值以满足您的需求。

Answer 2

你好，这一定是编码错误，如果你与 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, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});

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

Answer 3

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

/* 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

手机和电脑打印页面不同

Different print page from mobile and computer

html

javascript

css

php

media