zepto判断手机横竖屏

var CheckOrientation = (function(){
    var win = $( window ),
        get_orientation,
        last_orientation,
        initial_orientation_is_landscape,
        initial_orientation_is_default,
        portrait_map = { "0": true, "180": true },
        ww, wh, landscape_threshold;

    if(window.orientation !== undefined){
        ww = window.innerWidth || win.width();
        wh = window.innerHeight || win.height();
        landscape_threshold = 50;

        initial_orientation_is_landscape = ww > wh && ( ww - wh ) > landscape_threshold;
        initial_orientation_is_default = portrait_map[ window.orientation ];

        // (初始是横屏,方向是0或者180), *OR*
        // 初始是竖屏,方向是90或者-90, we
        //需要调整portrait_map
        if ( ( initial_orientation_is_landscape && initial_orientation_is_default ) || ( !initial_orientation_is_landscape && !initial_orientation_is_default ) ) {
          portrait_map = { "-90": true, "90": true };
        }

    }
      /**
       * 判断是横竖屏
       * @return {[type]} [description]
       */
    function get_orientation(){
        var isPortrait = true, elem = document.documentElement;

        if ( window.orientation !== undefined ) {

            isPortrait = portrait_map[ window.orientation ];
        } else {
            isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
        }

        return isPortrait ? "portrait" : "landscape";
    }

    last_orientation = get_orientation();

    function handler() {
        var orientation = get_orientation();
        if ( orientation !== last_orientation ) {
            last_orientation = orientation;
            win.trigger(‘orientation:change‘,[last_orientation]);//借用zepto的trigger事件
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", handler, false); 

    return {
        get_orientation : get_orientation
    }
})();

  

如何使用:

(1)CheckOrientation.get_orientation() //返回的是“portrait”:表示竖屏,返回的是“landscape”表示横屏

(2)$(window).on(‘orientation:change‘,function(e,type){//其中type值是portrait或者是landscape});//横竖屏转换的时候触发

时间: 2024-07-31 16:35:16

zepto判断手机横竖屏的相关文章

判断手机横竖屏

//判断手机横竖屏状态:window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { //竖屏 } if (window.orientation === 90 || window.o

Javascript 判断手机横竖屏状态

判断手机横竖屏状态: <script type=”text/javascript”> function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(“竖屏状态!”) } if(window.orientation==90||window.orientation==-90){ alert(“横屏状态!”) } } window.addEventListener(“onorientationcha

CSS3(@media)判断手机横竖屏

@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : portrait){ h2{color:green;}/*竖屏时字体绿色*/ } 原文地址:https://www.cnblogs.com/1032473245jing/p/8945096.html

css3完美解决手机横竖屏判断,让用户看邀请函更爽

html: <div id="cover1"></div> <p id="cover1w">亲,请竖屏观看本屏内容,谢谢^_^</p> css: /* 判断手机横竖屏  */ @media screen and (orientation:portrait) { /*  css[竖向定义样式]  */ #cover1{display: none;width: 100%;height: 100%;background-co

检测手机横竖屏切换

我们做移动端项目的时候,为了更好的完善用户体会,经常会需要处理好手机横竖屏时候的效果,下面看一下通过代码如何判断手机是否是横竖屏,两种方式: 一.第一种方式: <style type="text/css">body,html { margin: 0; height: 100%; position: relative; overflow: hidden;} #box { width: 100%; height: 100%; font-size: 20px; position:

Android手机横竖屏

三.Android设置横屏或竖屏: (一).全屏: 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 : requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全

js和css实现手机横竖屏预览思路整理

实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js中动态改变iframe的src来实现: 因为要实现横屏和竖屏的预览,切记,千万不能在点击横屏的时候,把竖屏的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖屏的,只是页面跟着一起旋转了90

iphone手机不同版本兼容、横竖屏

/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ .dialog-agreement-con{ height: 45%; /* iphone4*/ } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-dev

js判断手机浏览器是横屏or竖屏

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationchange,进行执行就可以了. //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==