jQuery 手机间隙中jquery mobile的方向改变事件实现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10023328/
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
Orientation change event implementation by jquery mobile in phone gap
提问by Nishant
Could someone please let me know the right code for orientation change event by jquery mobile in phone gap? Where and how do I implement this orientationChange function?
有人可以让我知道手机间隙中 jquery mobile 的方向更改事件的正确代码吗？我在哪里以及如何实现这个orientationChange函数？
回答by ghostCoder
$(window).bind('orientationchange', _orientationHandler);
then in the _orientationHandlerfunction, have something like:
然后在_orientationHandler函数中，有类似的东西：
if(event.orientation){
if(event.orientation == 'portrait'){
//do something
}
else if(event.orientation == 'landscape') {
//do something
}
}
回答by Ettiene Grobler
$(window).bind( 'orientationchange', function(e){
if ($.event.special.orientationchange.orientation() == "portrait") {
//Do whatever in portrait mode
} else {
//Do Whatever in landscape mode
}
});
You can add the resize event in the event parameter of the bind function, if you're targeting iOS and orientationchange doesn't work. Since changing orientation fires the resize event too.
如果您的目标是 iOS 并且orientationchange 不起作用，您可以在绑定函数的事件参数中添加resize 事件。由于改变方向也会触发调整大小事件。
回答by agaase
The following code should work across all the browsers to detect orientation change. It doesnt uses jquery mobile event but seems to work for most of devices.
以下代码应适用于所有浏览器以检测方向变化。它不使用 jquery 移动事件，但似乎适用于大多数设备。
1. var isIOS = /safari/g.test(navigator.userAgent.toLowerCase());
2. var ev = isIOS ? 'orientationchange' : 'resize';
3. var diff = (window.innerWidth-window.innerHeight);
4. $(window).bind(ev,function(){
5. setTimeout(function(){
6. if(diff*((window.innerWidth-window.innerHeight)) < 0)
7. orientationChanged();
8. },500);
9. });
Line 2 takes up the resize event for any non-safari browsers since other browsers in other devices take up resize event more consistently than orientation change event. http://www.quirksmode.org/m/table.html
第 2 行处理任何非 safari 浏览器的 resize 事件，因为其他设备中的其他浏览器比方向更改事件更一致地处理 resize 事件。 http://www.quirksmode.org/m/table.html
Line 5 performs the check in a timeout since some of the android native browser dont take up the new width immediately.
第 5 行执行超时检查，因为某些 android 本机浏览器不会立即占用新的宽度。
Line 6 For the orientation change to take place the product of the differences of old and new height and width should be negative.
第 6 行 为了发生方向变化，新旧高度和宽度的差异的乘积应该是负的。
回答by itsjavi
I'm using this in my mobile templates, as the orientationchange event wasn't triggered on iOS 7 Safari:
我在我的移动模板中使用它，因为在 iOS 7 Safari 上没有触发orientationchange 事件：
// ORIENTATION CHANGE TRICK
var _orientation = window.matchMedia("(orientation: portrait)");
_orientation.addListener(function(m) {
if (m.matches) {
// Changed to portrait
$('html').removeClass('orientation-landscape').addClass('orientation-portrait');
} else {
// Changed to landscape
$('html').removeClass('orientation-portrait').addClass('orientation-landscape');
}
});
// (event is not triggered in some browsers)
$(window).on('orientationchange', function(e) {
if (e.orientation) {
if (e.orientation == 'portrait') {
$('html').removeClass('orientation-landscape').addClass('orientation-portrait');
} else if (e.orientation == 'landscape') {
$('html').removeClass('orientation-portrait').addClass('orientation-landscape');
}
}
}).trigger('orientationchange');
// END TRICK
