Responsive sites – available resolution functions/variables

I’m using a responsive template and I’m trying to install a new logo that works effectively on all resolutions. Currently, I’ve installed a logo that works well with a on desktop and tablet resolutions but it doesn’t work on a smartphone.

Overall, I’m need to include a logo, slogan and contact information (phone #) within the header. When using a smartphone, it should enable a user to initiate a phone call by clicking/tapping on the phone #. The slogan is not needed for a smartphone.

When using an IPhone, the logo is very small (unreadable).

How can I resolve this situation? Is it possible to display different PNG files depending on the device resolution? How should address the phone #?

Below is the current code:

<!– /” id=”logo”><img src=”<?php echo of_get_option(‘logo_url’, “” ); ?>” alt=”<?php bloginfo(‘name’); ?>” title=”<?php bloginfo(‘description’); ?>”> –>

Thanks.