谷歌地图打印是如何工作的？答案

【问题标题】：How does google maps print work?谷歌地图打印是如何工作的？
【发布时间】：2009-09-08 19:51:22
【问题描述】：

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

【问题讨论】：

【解决方案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 如何组织他们的代码库，这与本答案的目的无关。

公认的媒体类型有：

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

From here

【讨论】：

其实页面上不是这样的。他们在主样式块中使用了@media print {}，而不是外部样式表。
@bigmattyh - 代码仅作为示例，而不是关于 Google 实际如何对其网页进行编码的明确声明。
@ChrisF - 有趣的是，我是我们三个回答者中唯一一个在发布之前真正查看了 Google 是如何做到的。太好了，你们已经编辑了你的答案以反映。 :)
@bigmattyh - 我确实考虑过查看 Google 地图页面 - 我什至输入了 URL，但我认为他们会调整他们的代码，这样你就不会看到相关部分 ;)跨度>
哇，感谢大家的精彩、详细的回答。我学到的东西比我预期的要多，这一切都会很有帮助。

【解决方案2】：

查看源代码 -> 搜索“@media print”。

google 地图页面在页面顶部的

【讨论】：

我不认为混淆是为了这个目的——我认为这都是为了减少带宽。
是也不是...他们让他们的代码很难在他们的所有应用程序中进行逆向工程。它超越了单纯的压缩。
哈哈，谁投反对票太可笑了。答案是正确且可验证的。

【解决方案3】：

Google 通过为页面上的样式指定 @media print 来做到这一点。

您也可以通过为<link> 标签指定“媒体”类型来做到这一点。您可以指定样式表只应用于屏幕显示，或者在这种情况下用于打印。

来自W3C CSS 2.0 spec的示例：

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

或

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

允许的类型：

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

【讨论】：