Como fazer com que apareça algo diferente em dispositivos móveis?

Andres10 · 31/03/2016

Si por ejemplo tengo un código de una imagen, pero quiero que esa imagen NO se vea en los móviles y en su lugar colocar otra imagen, ¿que tendría que hacer?

agiramx · 31/03/2016

no se si sea una web . pero lo puedes hacer fácil con css

kanikase · 31/03/2016

Mobile Detect - lightweight PHP class for detecting mobile devices (including tablets)

Cicklow · 31/03/2016

PHP:

<?php
function _is_mobile() {
    static $is_mobile = null;
 
    if ( isset( $is_mobile ) ) {
        return $is_mobile;
    }
 
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
 
    return $is_mobile;
}
if(_is_mobile()){
echo 'imagen para mobil';
}else{
echo 'imagen para pc';
}

?>

La funcion es del codigo fuente de WP... sino puedes buscar en el foro hay muchas otras... no es la 1° ves que preguntan lo mismo

ErickGS · 31/03/2016

Hay librerias javascript o plugins Jquery que ayudan a detectar si la visita es desde movil o no. A partir de ello hacer una condicion que valide que imagen mostrar en cada caso, mas tarde te paso un ejemplo de uno muy facil que use.

----
Edito: me gusta más el que puso cicklow, y creo que comenzaré a usar ese en vez del que uso con JavaScript.

Saludos.

kj2 · 31/03/2016

Pues si solo es ocultar una imagen desde en dispositivos móviles puedes hacerlo de varias maneras:

Con css, de acuerdo al tamaño de la pantalla:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      @ media (max-width: 720px) {
        .mobileoff{
          display:none;
        }
      }
    </style>
  </head>
  <body>
    <img src="http://i.imgur.com/s6i6Q.gif" class="mobileoff" />
  </body>
</html>

Editado: " @ media" va junto, pero el foro lo une para hacer una mención al usuario "medi", así que por eso he puesto un espacio.

Demo online: A Pen by kj (puedes encoger la ventana del navegador para ver como funciona).

Con php, según el navegador:

(Ya lo puso cliklow)

Con javascript, según el tamaño de la pantalla:

HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img src="http://i.imgur.com/s6i6Q.gif" class="mobileoff" />
    <script type="text/javascript">
      if (Number(window.innerWidth)<720){document.getElementsByClassName('mobileoff')[0].style.display="none";}
    </script>
  </body>
</html>

Se puede poner un event listener para que funcione igual que el css y la imagen desaparezca/aparezca según el tamaño de la pantalla, pero para lo que pides, no me parece necesario.

Demo online: A Pen by kj (para ver como funciona desde el ordenador, encoge la ventana del navegador igual que en el anterior código y recarga la pestaña)

Con javascript, según el navegador:

HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img src="http://i.imgur.com/s6i6Q.gif" class="mobileoff" />
    <script type="text/javascript">
    if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)){document.getElementsByClassName('mobileoff')[0].style.display="none";}
    </script>
  </body>
</html>

Demo online: A Pen by kj

Tanto el de cliklow, como este último código, para probarlo necesitas usar un navegador móvil o emular uno.

kj

Como fazer com que apareça algo diferente em dispositivos móveis?

Andres10

agiramx

kanikase

Cicklow

ErickGS

kj2

Tópicos similares