Responsive Icon size
Have any way to control the icon size depends on the screen size?
The icons only react to high density displays (such as Retina ones) to ensure they always look crisp and high quality.
Sure would be nice if the icons could be responsive. Still love the plugin…but out of 60 plugins, 676 pages of content and 4000 plus posts…this is the only item on my entire site not responsive.
I’m not exactly sure what this even means… shrink the images based on screen size? Doesn’t sound very useful to me given on mobile devices you’re using your fingers and therefore you need bigger icons/buttons anyway.
I was shocked to find out the plugin uses double resolutions scaled down to 50% to support the retina display hype.
Developer please read:
And while we’re at it.. why don’t you use sprites in the first place?
Sprites with the Image Sets or Media Queries in CSS would be the only right way before claiming your plugin is the only one to support retina displays….
Using double resolution images scaled to 50% is the only way of supporting retina. If you were to look closely enough at our code you would notice that the plugin uses media queries to conditionally hide or show the high resolution set (depending on screen density).
If the anchors containers are hidden the images won’t be downloaded by the browser. So the double resolution will only be downloaded (and shown) on high density displays, where the are required.
Also, retina nowadays are not the only high density displays so using webkit specific APIs would exclude a good amount of users.
Although I agree using sprites is better in some cases, it doesn’t fit our infrastructure and it could also be counterproductive when you only enable 2-3 social providers.
No you are wrong.
You can not use media queries or image sets with img elements.
Only CSS background images – that’s why image sprites with queries would be the only way to do your icons
Have you tested your icons on both retina and non retina displays?
alert('Device Pixel Ratio: ' + window.devicePixelRatio);
shows that I have a devicePixelRatio of 1
Now in Crome when I rightclick and icon and > inspect image
it shows the icon is 48×48 downscaled to 24×24
As I’ve explained, we hide the image elements based on media queries, rather than changing the image source. This achieves the same effect as the browser won’t download the extra set.
If the device pixel ratio is below 2 then the images with regular size will be used unless in your preferences under Settings -> Social Media for “Icon Resolution” you have selected “Single”, which will force only 1 set to be used (the larger one, for compatibility purposes).
- The topic ‘Responsive Icon size’ is closed to new replies.