I have a web page that interacts with smartphones (make calls, save contacts, open a specific app, etc.) therefore, if any user accesses from a notebook or desktop computer (including a tablet) your experience will not be the same. That's why I want to show a modal / popup message that alerts the visitor that the page works better on mobile phones.
How do I get this message to show only on those devices and not on smartphones? I've thought about the bootstrap media query and screen resolutions but I do not really know how to apply it to the code. With AngularJS maybe? Any ideas?
I leave the window that opens automatically:
<?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>Thank you!