Javascript iphone/ipad 触发意外的调整大小事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8898412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iphone/ipad triggering unexpected resize events
提问by rdoyle720
I'm working on a mobile version of my site. I'm using media queries and CSS as much as possible, but I'm also using some javascript to, for example, turn my navigation into a collapse/expand list on smaller devices to save room.
我正在开发我网站的移动版本。我尽可能多地使用媒体查询和 CSS，但我也使用了一些 javascript，例如，将我的导航转换为较小设备上的折叠/展开列表以节省空间。
To handle all of this, I was attempting to use the window.resize event. This allows the magic to happen on desktop browsers while they're resized, but I'm getting resize events on iPad/iPhone when I'm not expecting them.
为了处理所有这些，我试图使用 window.resize 事件。这允许在调整大小时在桌面浏览器上发生魔术，但是当我不期望它们时，我在 iPad/iPhone 上收到调整大小事件。
On desktop browsers, I only get a resize event if I actually resize the window. On mobile browsers I get the resize event when I change orientation (expected), but I also get it when I toggle to expand/collapse something.
在桌面浏览器上，我只有在实际调整窗口大小时才会收到调整大小事件。在移动浏览器上，当我更改方向（预期）时会收到调整大小事件，但是当我切换以展开/折叠某些内容时也会收到调整大小事件。
Here's a simple example:
这是一个简单的例子：
<!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>
When you click the link on a desktop browser, no alert. Click the link on iPhone/iPad, you get the alert. What's the deal?
当您单击桌面浏览器上的链接时，没有警报。单击 iPhone/iPad 上的链接，您会收到警报。这是怎么回事？
回答by James Greig
Store the window width and check that it has actually changed before proceeding with your $(window).resizefunction:
存储窗口宽度并在继续执行您的$(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
});
});
回答by btjakes
Here's the vanilla javascript version of the accepted answer
这是已接受答案的香草 javascript 版本
document.addEventListener('DOMContentLoaded', function() {
// Store the window width
var windowWidth = window.innerWidth
// Resize Event
window.addEventListener("resize", function() {
// Check window width has actually changed and it's not just iOS triggering a resize event on scroll
if (window.innerWidth != windowWidth) {
// Update the window width for next time
windowWidth = window.innerWidth
// Do stuff here
}
// Otherwise do nothing
})
})
回答by Kees C. Bakker
I needed to specify a width:
我需要指定一个宽度：
<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">
Styles:
款式：
html, body
{
height:100%;
width:100%;
overflow:auto;
}
回答by Felix
Is the assumption wrong, that you only want to have the effect of the resize event on a non-touch device? If so you could just use Modernizr and do a check like:
假设错误，您只想在非触摸设备上产生调整大小事件的效果？如果是这样，您可以使用 Modernizr 并进行如下检查：
$(window).resize(function(e){
if(Modernizr.touch) {
e.preventDefault();
}
});
回答by weBBer
I found out the answer in StackOverflow itself link of the solution. it's the answer by sidonaldsonthat helped me solve an issue faced earlier like this. ty
我在 StackOverflow 本身的解决方案链接中找到了答案。正是这个答案sidonaldson帮助我解决了之前遇到的这样一个问题。泰
the answer is:
答案是：
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//DO RESIZE HERE
cachedWidth = newWidth;
}
});
回答by Abhidev
Check if your explicitly scrolling the html body wrapper to hide the address bar when the page loads.
检查您是否在页面加载时显式滚动 html 正文包装器以隐藏地址栏。
回答by anthonygore
@3stripe has the correct answer.
@3stripe 有正确答案。
This is just a slight modification which makes it more efficient by caching the window object rather than repeatedly instantiating jQuery (keep in mind the resizeevent may be called rapidly on an actual resize).
这只是一个小小的修改，它通过缓存 window 对象而不是重复实例化 jQuery 来提高效率（请记住，resize在实际调整大小时可能会快速调用该事件）。
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
});
});
回答by MegaMatt
It feels hacky to check the window size to see if it's changed. Instead, use the resources jQuery provides you!
检查窗口大小以查看它是否已更改感觉很麻烦。相反，请使用 jQuery 为您提供的资源！
In the event handler, you can check the jQuery event's targetfield, which is always set to the DOM element that originated the event. If the user resizes the window, targetwill be the window. If the user resizes #someDiv, targetwill be the #someDiv.
在事件处理程序中，您可以检查 jQuery 事件的target字段，该字段始终设置为发起该事件的 DOM 元素。如果用户调整窗口大小，target将是窗口。如果用户调整大小#someDiv，target将是#someDiv.
$(window).on('resize', function(event) {
if ($(event.target).is($(window))) {
doTheThing();
}
});
