Change the content of onclick according to page size

Question

I’m doing a project that some images have tooltip, but it only appears with the click. The problem is that the mobile version is not cool, so I need to open a new page with the content of this tooltip. Is there any way to change onclick content according to page size?

Ex:

On the desktop would be:

<img src="img.jpg" onclick="abre o tooltip" />

And in mobile would be:

<img src="img.jpg" onclick="location.href='abre pagina'" />

Answer 1

You can use it this way

var mq = window.matchMedia( "(min-width: 500px)" ); 
if (mq.matches) {
    // mostra imagem com o tootlip
}
else {
    // mostra imagem com link
}

Source: http://www.sitepoint.com/javascript-media-queries/