Я работаю над мобильной версией своего сайта. Я использую медиа-запросы и CSS как можно больше, но я также использую javascript, чтобы, например, превратить мою навигацию в список коллапса/расширения на более мелких устройствах, чтобы сохранить комнату.
Чтобы справиться со всем этим, я пытался использовать событие window.resize. Это позволяет магии происходить на настольных браузерах, пока они изменяются, но я получаю изменения размера на iPad/iPhone, когда я их не ожидаю.
В настольных браузерах я получаю только событие изменения размера, если я действительно изменяю размер окна. В мобильных браузерах я получаю событие изменения размера, когда меняю ориентацию (ожидаю), но я также получаю ее, когда я переключаюсь на расширение/сбой.
Вот простой пример:
<!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>
Когда вы нажимаете ссылку в обозревателе рабочего стола, нет предупреждения. Нажмите ссылку на iPhone/iPad, вы получите предупреждение. Какая сделка?