Question

我有fancybox弹出窗口启动OK，但现在只响应：

if (window.innerWidth < 400 && window.innerHeight < 600)

请参阅此处的示例：www.casedasole.it/testing/popup.html

如果您以低于400px的宽度重新加载页面，则会弹出弹出窗口。

但我需要的是将“if”更改为表示移动设备处于纵向模式的任何内容。然后弹出窗口会说：“这个网站在风景中看起来更好”。我发现了对orientationchange个事件的引用，但是还没有用于检测移动设备是否处于纵向状态，如果是，则启动弹出窗口。现在的代码是：

if (window.innerWidth < 400 && window.innerHeight < 600)   
{$.fancybox.open([
    {
        href : 'http://www.casedasole.it/images/jarac.jpg'
    }
], {
        padding : 0
}   
);}

Answer 1

的 jsFiddle Demo 的

你应该做的只是检查窗口的宽度和高度。如果宽度>比高度更高的是景观。如果高度超过宽度则为纵向。

if (window.innerWidth < window.innerHeight)//portait if (window.innerWidth > window.innerHeight)//landscape

修改的

应该只是

var isPortrait = window.innerWidth < window.innerHeight; if( isPortrait ) { $.fancybox.open([ { href : 'http://www.casedasole.it/images/jarac.jpg' } ], { padding : 0 } ); }

Answer 2

我使用width与height进行比较，不仅适用于移动设备，也适用于桌面浏览器，但如果您真的想要过滤移动设备，请改为比较功能。

这就是我通常做的事情：

// detect mobile devices that support touch screen feature
// including windows mobile devices
var isTouchSupported = 'ontouchstart' in window,
    isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null;

jQuery(document).ready(function ($) {
    if (isTouchSupported || isTouchSupportedIE10) {
        // this is a mobile device
        if (window.orientation == 0 || window.orientation == 180) {
            // run init for portrait orientation
        } else if (window.orientation == 90 || window.orientation == -90) {
            // run init for landscape orientation
        }
        // detect orientation changes
        window.addEventListener("orientationchange", function () {
            if (window.orientation === 0 || window.orientation === 180) {
                // changed to portrait
            } else if (window.orientation == 90 || window.orientation == -90) {
                // changed to landscape
            }
        }, false);

    } else {
        // this is desktop device
        // run init for desktops here
    }
}); // ready

Fancybox - 用于检测移动方向的JavaScript，如果是肖像，则启动建议弹出窗口

2 个答案: