使用推文按钮时与 dpi CSS 使用相关的控制台通知

Question

我正在使用这样的默认推文按钮：

<a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>
<script>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>

当我在页面加载后访问控制台时，出现以下消息：

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)

例如，进入以下页面并访问控制台。您会看到同一条消息的多个实例。

如何解决？

参考：https://dev.twitter.com/web/tweet-button

Answer 1

这是 Chrome

的错误

要修复它，您需要使用 ddpx 覆盖 dpi，例如 here

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

但是由于您使用的是 Twitter 代码，因此您可能必须编写自己的自定义 @media 来覆盖它...

使用推文按钮时与 dpi CSS 使用相关的控制台通知

Console notices relating to dpi CSS usage when using a tweet button

javascript

css

twitter