Javascript 谷歌地图是如何打印的？

即使没有打印方向的“打印机友好”视图，当我在浏览器中选择“文件->打印”时，页面的格式也与原始视图不同。谷歌是如何做到这一点的？这是一种特殊的javascript外观吗？

谷歌通过为页面上的样式指定

@media print

来实现这一点

您也可以通过为

标记指定“媒体”类型来完成此操作。您可以指定样式表只应用于屏幕显示，或者在本例中应用于打印

示例来自：

允许的类型：

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

---

代码中将定义一个打印样式表，大致如下：

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

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

我不知道谷歌如何组织他们的代码库，这与这个答案的目的无关

认可的媒体类型包括：

all适用于所有设备。
盲文 用于盲文触觉反馈 设备。
压花用于分页 盲文打印机。
手持设备 用于手持设备（通常为小型 屏幕，有限带宽）。
打印 用于分页材料和 以打印方式在屏幕上查看文档 预览模式。请查阅 关于分页媒体的信息部分 关于以下格式问题： 特定于分页媒体。
投影 用于计划的演示文稿， 例如投影仪。请咨询 有关分页媒体的部分 有关格式问题的信息 特定于分页媒体的内容。
屏幕主要用于彩色 计算机屏幕。
演讲 语音合成器。注：CSS2有一个 类似的媒体类型称为“听觉” 这个目的。见附录 有关详细信息，请参阅音频样式表。
tty 用于使用固定节距的介质 字符网格（例如电传打字机、， 终端，或带有 显示能力有限）。作者 不应将像素单位与 “tty”媒体类型。
电视用于 电视类设备（低功耗） 分辨率，颜色， 有限的可滚动屏幕、声音 可用）

查看来源->搜索“@media print”

---

谷歌地图页面在页面顶部的声明中为打印样式定义了单独的布局。他们的工程师在尽可能多地混淆内容方面做得非常好。

实际上，页面上的情况并非如此。他们在主样式块中使用了@media print{}，而不是外部样式表。@bigmattyh-该代码只是一个示例，而不是关于谷歌如何对其页面进行编码的明确声明。@ChrisF-有趣的是，在我们三个回答者中，只有我一个在发布之前查看了谷歌是如何做到的。很高兴你们编辑了自己的答案以反映情况。：）@BigMatth-我确实考虑了谷歌地图页面——我甚至在URL中打字，但我想他们会调整他们的代码，这样你就不会看到相关的部分了。哇，谢谢你们所有人的精彩、详细的回答。我学到的东西比我预期的要多，这一切都会非常有帮助。我不认为模糊处理是为了达到这个目的-我认为这都是为了减少带宽。是和否。。。他们使得代码很难在所有应用程序中进行逆向工程。这不仅仅是压缩。哈哈，谁否决了这一点都是荒谬的。答案是正确的和可验证的。

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

<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 }
}