Facebook如何根据用户屏幕自动显示正确尺寸的图像？

Question

我注意到,当显示来自相册的照片时,网上的Facebook会巧妙地检测到您的屏幕大小并选择正确的缩略图照片,然后为img元素选择正确的宽度和高度.

我使用chrome开发人员工具来查看Facebook中图像的自然和显示宽度和高度.

以下是在分辨率为1600x1200的20.41"x 12.8"显示器上观看照片的示例

请注意它是如何提到图像src是_o.jpg后缀,自然尺寸是1529x2048而当前图像元素尺寸是432 x 578

这是14英寸macbook air上的相同图像,显示分辨率为1440 x 900.

这个使用后缀_n,你看不清楚,但你可以看到自然尺寸是717 x 960而当前的图像元素尺寸是538 x 720

我找出的理由是学习相同的策略,但用它来显示标准的png或jpeg格式的艺术作品.

使用css实施了多少策略？在javascript中多少钱？

我的问题是:

1. Facebook如何进行此检测？
2. Facebook为每张原始照片创建了多少缩略图？
3. Facebook如何根据屏幕尺寸确定img元素的正确宽度和高度？

我相信Facebook允许的最大分辨率为2048by2048.

除此之外,我无法了解更多信息.

这个问题也在Quora中交叉发布,以获得更广泛的受众.

更新: 我使用cakephp作为后端和前端我依赖于jquery和html5约定

Answer 1

当您拉伸窗口并因此更改"影院"的大小时,图像会改变大小.由此我只能假设'影院'设置为特定尺寸,并且图像设置为具有最大宽度或最大高度,因此它与外部元素(影院)的大小一起扩展或收缩.这部分是用CSS完成的.

我认为屏幕尺寸检测将与DOMDimensions(http://pastebin.com/Biz9ntMj)和DimensionTracking(http://pastebin.com/Ys72APyL)功能有关.此外,任何点击都会被'primer'(https://gist.github.com/376039)脚本拦截,然后该脚本通过AsyncRequest(如果需要)路由操作,然后根据JOSN响应做出反应.我的屏幕大小只显示链接和最终图像的一个大小(_n.jpg),但我认为好像是由javascript处理,那么它将如何工作大小,否则(如果javascript关闭或它会回到他们对720 x 960的一个尺寸的最佳猜测,然后使用上面的css来强制调整大小.

编辑

关于CSS ...
使用CSS,您可以将高度(特定或相对于屏幕大小,您想要的)设置为包含图像的块元素,然后将该图像设置为包含图像max-height/width而不是定义的高度/宽度.这样,图像将保持其纵横比,但仍然可以扩展和收缩到容器内允许的大小.这方面的一个例子可以在这里看到:http://jsfiddle.net/tV6gG

在javascript上...
当在页面上点击任何内容(并且javascript正在运行)时,它会通过上面提到的'primer'脚本捕获(在这里可以看到完整版本 - http://pastebin.com/BwhKJ14d) - (有关详细信息,请参阅http://www.facebook.com/video/video.php?v=596368660334&ref=mf).然后,该脚本检查relclick事件的属性(参见第28行),然后根据该属性决定"bootload"的内容(参见第52行).从这里开始,它会加载一个函数的野兽(http://pastebin.com/eGgtz4dT)来处理所有图像类型的东西.

在这个脚本中有几个看起来可能与图像大小有关的函数,一个是getCurrentImageServerSizeDimensions(参见第218行).还有其他关于舞台大小调整的内容以及其他内容,但我的猜测是重要的.据我所知,这个脚本将编译一个数据加载,并与服务器进行不同的调用,而不是常规的href.

源自未转义的href:

http://www.facebook.com/photo.phpfbid=10152228292295554&
set=t.516587895&type=3&src=http://sphotos-g.ak.fbcdn.net/hphotos-ak-
snc7/374008_10152228292295554_643067794_n.jpg&size=720,960&theater

未转发的实际请求发送到pagelet(有关pagelet的更多信息,请参阅上面关于BigPipe的视频)maker:

http://www.facebook.com/ajax/pagelet/generic.php/PhotoViewerInitPagelet?
ajaxpipe=1&ajaxpipe_token=AXhGMa1SEXnChIug&no_script_path=1&data=
{"fbid":"10152228292295554","set":"t.516587895","type":"3",
"size":"720,960","theater":null,"firstLoad":true,"ssid":1354797924833}
&__user=6462456246&__a=1&__adt=2

虽然它们确实包含大部分相同的信息,但您可以清楚地看到请求被捕获,因此(如果需要)可以通过该信息发送任何更正的信息(图像大小).

至于以前的脚本...
的DOMDimensions脚本是由功能标题很好解释说实话功能的集合(getElementDimensions,getViewportDimensions,getViewportWithoutScrollbarDimensions,getDocumentDimensions和measureElementBox).有关这些单个函数实际执行的更多信息,我建议您查看它们,并查看您没有获得的任何基本javascript函数.它看起来并不太复杂.
DimensionTracking脚本似乎只是调用getViewportDimensions()并保存/ajax/dimension_context.php页面生成的数据.
如果似乎每100毫秒重新评估尺寸(见第17行),在窗口调整大小(见第18行)或窗口焦点(见第18行).


总而言之,我认为你可以通过使用上面的CSS方法来制作重要的东西(减去找到实际不同的图像的东西),使大量的图像适合正确的舞台大小.

Answer 2

CSS 可以使用@Media 选择器来确定一般宽度/高度。您将无法使用此方法确定确切的宽度/高度。这将使您大致了解可能想要显示哪些元素。从此时起，您可以使用相对值来调整 img 元素的大小。要确定确切的屏幕尺寸，您必须使用 Javascript。在 JQuery 中，您可以访问文档的宽度和高度。

Facebook 可能会根据其媒体选择器的最大尺寸创建缩略图。当调整 img 元素的大小时，浏览器将自动调整后面图像的大小。如果您查看 Facebook 时间轴上的图像，您会注意到“_n.jpg”后缀。当您将其更改为“_a.jpg”时，您将获得该图像的较小版本。