javascript - detectar - mobile detect js
iphone/ipad provoca eventos de cambio de tamaño inesperados (7)
Estoy trabajando en una versión móvil de mi sitio. Estoy utilizando las consultas de medios y CSS tanto como sea posible, pero también estoy usando algunos javascript para, por ejemplo, convertir mi navegación en una lista de colapso / expansión en dispositivos más pequeños para ahorrar espacio.
Para manejar todo esto, estaba intentando usar el evento window.resize. Esto permite que la magia suceda en los navegadores de escritorio mientras se cambian de tamaño, pero obtengo cambios de tamaño en el iPad / iPhone cuando no los estoy esperando.
En los navegadores de escritorio, solo obtengo un evento de cambio de tamaño si realmente cambio el tamaño de la ventana. En navegadores móviles obtengo el evento de cambio de tamaño cuando cambio de orientación (esperado), pero también lo consigo cuando alterno para expandir / colapsar algo.
Aquí hay un ejemplo simple:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
$(".opener").click(function(){
$(".box").slideToggle();
});
$(window).resize(function(){
alert("resized");
});
});
</script>
</head>
<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>
Cuando hace clic en el enlace en un navegador de escritorio, no hay alerta. Haga clic en el enlace en iPhone / iPad, recibirá la alerta. ¿Cual es el trato?
¿Está equivocada la suposición de que solo desea tener el efecto del evento de cambio de tamaño en un dispositivo sin contacto? Si es así, simplemente podría usar Modernizr y hacer un control como:
$(window).resize(function(e){
if(Modernizr.touch) {
e.preventDefault();
}
});
@ 3stripe tiene la respuesta correcta.
Esto es solo una pequeña modificación que lo hace más eficiente almacenando en caché el objeto de la ventana en lugar de crear instancias repetidas de jQuery (tenga en cuenta que el evento de cambio de resize puede ser llamado rápidamente en un cambio de tamaño real).
jQuery(document).ready(function($) {
// Cached window jQuery object
var $window = $(window);
// Store the window width
var windowWidth = $window.width();
// Resize Event
$window.resize(function(){
// Check window width has actually changed and it''s not just iOS triggering a resize event on scroll
if ($window.width() != windowWidth) {
// Update the window width for next time
windowWidth = $window.width();
// Do stuff here
}
// Otherwise do nothing
});
});
Almacene el ancho de la ventana y verifique que realmente haya cambiado antes de continuar con su función de $(window).resize :
jQuery(document).ready(function($) {
// Store the window width
var windowWidth = $(window).width();
// Resize Event
$(window).resize(function(){
// Check window width has actually changed and it''s not just iOS triggering a resize event on scroll
if ($(window).width() != windowWidth) {
// Update the window width for next time
windowWidth = $(window).width();
// Do stuff here
}
// Otherwise do nothing
});
});
Compruebe si está desplazando explícitamente el envoltorio del cuerpo html para ocultar la barra de direcciones cuando se carga la página.
Necesitaba especificar un ancho:
<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">
Estilos:
html, body
{
height:100%;
width:100%;
overflow:auto;
}
Se siente raro comprobar el tamaño de la ventana para ver si ha cambiado. En su lugar, use los recursos que jQuery le brinda.
En el controlador de eventos, puede verificar el campo de target del evento de jQuery, que siempre se establece en el elemento DOM que originó el evento. Si el usuario cambia el tamaño de la ventana, el target será la ventana. Si el usuario cambia el tamaño de #someDiv , el target será #someDiv .
$(window).on(''resize'', function(event) {
if ($(event.target).is($(window))) {
doTheThing();
}
});
descubrí la respuesta en en el enlace de la solución . es la respuesta de sidonaldson que me ayudó a resolver un problema enfrentado anteriormente como este. ty
la respuesta es:
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//DO RESIZE HERE
cachedWidth = newWidth;
}
});