Mostrar imagen solo en pantallas más pequeñas
¿Alguien puede ayudarme a modificar el código a continuación para mostrar la imagen solo en la vista móvil? En este momento, siempre es visible.
<style type="text/javascript">
.icon-xyz
{float: left; width: 22px;cursor: pointer;background: none;}
@media only screen and (max-device-width: 568px) and (min-device-width: 320px) and (orientation: portrait)
{.icon-xyz {float: left;width: 22px;background: none;cursor: pointer;padding: 0 13px !important;}}
</style>
El siguiente es el script para agregar imagen:
$(document).ready(function() {
var loc = window.location;
if (loc.toString().toUpperCase().indexOf('/home/') > -1)
{
$("#icon-xyz").css("background", "url(/images/Icon1.png) no-repeat");
if($.cookie("lang") == "es")
{
$("#icon-xyz").css("background", "url(/images/Icon2.png) no-repeat");
}
}
});