为什么使用Chrome打印的网站使用移动版式？ [英] Why website printed with Chrome is using mobile layout?

问题描述

在Chrome浏览器中，当打印到A4纸时，它会以 568px 媒体查询宽度进行呈现。尝试打印响应式网站，例如 The Verge 或 Bootstrap ，你会在预览中看到它使用的是移动版式（请参阅下图）。

.stack.imgur.com / GhGKm.jpgalt =使用Chrome打印的边缘>

在Firefox中，它使用 900px （见下图）。

是否有办法让它打印桌面布局？

我知道我可以通过将我的移动断点更改为568px来解决此问题，但是我需要我的网站以768px的分辨率打开iPad。

解决方案

< Verge 不是使用移动布局进行打印。它使用自己的打印布局。如果您在模拟介质 print 时检查页面，则会看到 media =print声明的加载。这是通过HTML加载：

 < link href =...media =print = stylesheettype =text / css> 
  

如果您希望网站在打印时看起来与在手机上看起来有所不同，只需指定<$ c

  @media screen and（max-width：$ c $ screen>  768px）{
 ... 
} 
  

打印时， screen 声明将被忽略，因此完全忽略了您的手机媒体查询。

In Chrome, when printing to A4 paper, it is rendered with 568px media query width.

Try printing a responsive website such as The Verge or Bootstrap and you will see in the preview that it's using the mobile layout (see image below).

While in Firefox, it uses around 900px (see image below).

Is there a way to make it print Desktop layout?

I know I can work around this by changing my mobile breakpoint to 568px, but I need my website to break in 768px for iPad.

解决方案

The Verge isn't using a mobile layout for printing. It's using its own print layout. If you inspect the page whilst emulating a media of print you'll see a load of media="print" declarations. This is loaded in through the HTML:

<link href="..." media="print" rel="stylesheet" type="text/css">

If you want a website to look different when printing than it does on mobile, simply specify screen within your mobile media queries:

@media screen and (max-width: 768px) {
    ...
}

When printing, the screen declaration will be ignored, thus completely ignoring your mobile media query.

这篇关于为什么使用Chrome打印的网站使用移动版式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！