Tengo una página web en la que quiero mostrar un mensaje modal que le avise al visitante de PC que la página funciona mejor en móviles.
¿Cómo logro que este mensaje se muestre únicamente en dichos dispositivos y no en los smartphones?
He pensado en las media query de bootstrap y resoluciones de pantalla pero no se realmente como aplicarlo al código.
Les dejo la ventana que se abre automáticamente:
<?php
# Iniciando la variable de control que permitirá mostrar o no el modal
$exibirModal = false;
# Verificando si existe o no la cookie
if(!isset($_COOKIE["mostrarModal"]))
{
# Caso no exista la cookie entra aquí
# Creamos la cookie con la duración que queramos
//$expirar = 3600; // muestra cada 1 hora
//$expirar = 10800; // muestra cada 3 horas
//$expirar = 21600; //muestra cada 6 horas
$expirar = 43200; //muestra cada 12 horas
//$expirar = 86400; // muestra cada 24 horas
setcookie('mostrarModal', 'SI', (time() + $expirar)); // mostrará cada 12 horas.
# Ahora nuestra variable de control pasará a tener el valor TRUE (Verdadero)
$exibirModal = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage para móviles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cuerpo de la página</h2>
<!-- Modal -->
<div class="modal fade" id="modalInicio" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bienvenido a Página.com</h4>
</div>
<div class="modal-body">
Nuestra web se ve mucho mejor desde un disposito móvil, puedes interactuar con ella en una forma única. Pruébalo ahora mismo!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
<?php if($exibirModal === true) : // Si nuestra variable de control "$exibirModal" es igual a TRUE activa nuestro modal y será visible a nuestro usuario. ?>
<script>
$(document).ready(function()
{
// id de nuestro modal
$("#modalInicio").modal("show");
});
</script>
<?php endif; ?>
</body>
</html>
Gracias!