Question

即使没有“打印机友好”的打印方向视图，当我在浏览器中选择“文件 - >打印”时，页面的格式也不同于原始视图。 Google如何实现这一目标？它是一个特殊的javascript门面吗？

Answer 1

代码中定义了一个打印样式表，类似于：

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

如果样式表包含在单独的文件中。或者：

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

如果样式在代码正文中定义。最后一个定义显示相同的样式可以应用于多种媒体类型。

我不知道Google如何组织他们的代码库，这与此答案的目的无关。

认可的媒体类型包括：

全部适用于所有设备。
  的盲文   用于盲文触觉反馈   装置。
  浮雕用于分页   盲文打印机。
  掌上电脑预期   用于手持设备（通常很小）   屏幕，有限的带宽）   打印   适用于分页材料和   在印刷品屏幕上查看的文件   预览模式。请咨询   有关分页媒体的信息部分   关于格式化问题   特定于分页媒体。
  的投影   用于预计演示，   例如投影仪。请咨询   有关分页媒体的部分   有关格式问题的信息   这是特定于分页媒体的   屏幕主要用于颜色   电脑屏幕。
  演讲用于   语音合成器。注意：CSS2有一个   类似的媒体类型称为“听觉”   这个目的。请参阅附录   听觉样式表详情。
  的 TTY   适用于使用固定间距的媒体   字符网格（如电传，   终端或便携式设备   有限的显示能力）。作者   不应该使用像素单位   “tty”媒体类型。
   tv 打算用于   电视类设备（低   分辨率，颜色，   有限滚动屏幕，声音   可用）。

From here

Answer 2

查看来源 - ＆gt;搜索“@media print”。

Google地图页面为＆lt; style＆gt;中的打印样式定义了单独的布局。声明在页面顶部。他们的工程师做了很好的非常的工作，尽可能地混淆了内容。

Answer 3

Google正在通过在页面上为其样式指定@media print来实现此目的。

您也可以通过为<link>标记指定“媒体”类型来执行此操作。您可以指定样式表仅应用于屏幕显示，或者在本例中用于打印。

W3C CSS 2.0 spec的示例：

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

OR

@media print {
    body { font-size: 10pt }
}

允许的类型：

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

谷歌地图如何打印工作？

3 个答案: