Does twitter button support high DPI?

[BinShao1]

Does twitter button renders with different size due to different DPI? I have tried put twitter button (iframe solution) on a page and try it on a high DPI device; and then it looks smaller.

Does twitter button support high DPI? If so, how to set it up?

Thanks,
Bin

[benward]

Hi Bin,

All graphic assets within all of our TFW widgets automatically use Retina/Hi-DPI assets for any browser with a window.devicePixelRatio greater than 1—we have 2× versions of all the sprites, and embedded Tweets will use higher resolution avatars and cards images where available.

The literal on-screen dimensions of the button will be handled by the browser through, based on how it multiplies the declared pixels.

Ben

[BinShao1]

Thanks Ben. Sound to me I can set the “declared pixels” for a button. Is this correct? I can set the height and width of the iframe; but I did not found a way to change the width and height of the button. The only think I saw is using data-size for JS solution. And it can make the button larger. However, I still cannot define the different height/width for button by myself. Is there a way to set height / width for the buttons by myself? Then I can set it per different DPI. Thanks!

[benward]

There’s no way to do that, no. The widgets get auto-sized based on the length of the text within.

In high-DPI set-ups you shouldn’t need to set different ‘pixel’ values for the widgets: In HTML and CSS ‘px’ units are not physical units, the browser translates ‘2px’ into the appropraite number of physical display pixels based on the DPI setting (so, on a regular display 2px is 2 display pixels, but on a retina display it’s 4px.)

It is not the case (outside of the 2D APIs of the API) that you ever have to worry about the HiDPI translation yourself.

Given that, can you give a little more information about what you’re building that’s requiring manual sizing? In some browsers you can also use the CSS zoom property to blow up UI if you’re trying to make something intentionally oversized, although I don’t know how that then interacts with the HiDPI measurements.

[BinShao1]

Thanks for the response. I am just building a website and would like it looks the same on several different type of DPI’s. Based on my understanding, Twitter button support 1x and 2x DPI’s; and I would like to adjust it for other DPIS’s; such as 1.5. I have not tried it on all devices though; maybe my assumption is just wrong.

Also, I want the button looks nice with other text around it. I am checking if there is some built-in setting that I can use. Seems there is not, then I will try to find some alternative solutions; or just leave it like that.

[niall]