Firefox shows low-res banner on retina display

[jsmoriss]

When looking at the "computed" CSS for the new directory, Chrome shows the 1544x500px banner while Firefox shows the 772x250px banner (for the same retina display).

A quick search suggests variable support for "-webkit-min-device-pixel-ratio" (used for the banner CSS in the new plugin directory) -- perhaps an alternate CSS syntax would be better supported by Firefox and other browsers?

[jsmoriss]

From ​https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio:

"This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."

@media (-webkit-min-device-pixel-ratio: 2) { ... }
/* is equivalent to */
@media (min-resolution: 2dppx) { ... }

[tellyworth]

In 4514:

Plugin directory: fix high res banners and icons in Firefox. Thanks @jsmoriss.

Fixes #2322.

[tellyworth]

I went with an explicit 144dpi and left the -webkit rule in place based on ​https://css-tricks.com/snippets/css/retina-display-media-query/.