js横屏实现

最新推荐文章于 2024-06-19 11:45:16 发布

原创最新推荐文章于 2024-06-19 11:45:16 发布 · 967 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

11 篇文章

订阅专栏

这段代码定义了一个名为changeOrientation的函数，用于处理页面的横竖屏适配。它根据窗口尺寸判断屏幕方向，并相应调整指定元素($print)的宽高、位置及旋转角度。当设备发生旋转或窗口大小改变时，会触发事件监听器进行相应的布局更新，确保元素始终适应屏幕方向。

参考链接：https://common.ofo.so/campaign/20country/

/**
 * 横竖屏
 * @param {Object}
 */
function changeOrientation($print) {
    var width = document.documentElement.clientWidth;
    var height =  document.documentElement.clientHeight;
    if(width < height) {
        $print.width(height);
        $print.height(width);
        $print.css('top',  (height - width) / 2 );
        $print.css('left',  0 - (height - width) / 2 );
        $print.css('transform', 'rotate(90deg)');
        $print.css('transform-origin', '50% 50%');
    }

    var evt = "onorientationchange" in window ? "orientationchange" : "resize";

    window.addEventListener(evt, function() {

        setTimeout(function() {
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;

            if( width > height ){
                $print.width(width);
                $print.height(height);
                $print.css('top',  0 );
                $print.css('left',  0 );
                $print.css('transform' , 'none');
                $print.css('transform-origin' , '50% 50%');
            }
            else {
                $print.width(height);
                $print.height(width);
                $print.css('top',  (height-width)/2 );
                $print.css('left',  0-(height-width)/2 );
                $print.css('transform' , 'rotate(90deg)');
                $print.css('transform-origin' , '50% 50%');
            }
        }, 300);
    }, false);
}

export default changeOrientation;