zepto实现移动端页面强制竖屏效果

使用方法：

引入zepto库文件、CSS样式文件

<script src="style/js/zepto.min.js"></script>
<link rel="stylesheet" href="style/css/knowledge_wap_new.min.css" />

插件初始化、配置

//避免搜索影响屏幕尺寸判断
    $("#textInput").on('focus',function(){
        $("#mask").hide();
    });
    $(window).on('orientationchange',function(){
        switch(window.orientation){
           case -90:
           case 90:
               $("#mask").show();
               break;
           case 0:
               $("#mask").hide();
               break;
        }
    }); 

HTML结构

<!--禁止横屏  begin-->
<div class="mask flexcontainer" id="mask">
  <div class="mask-box">
    <div class="mask-pic"> <i></i> </div>
    <span>为了更好的体验，请将手机/平板竖过来</span> </div>
</div>
<!--禁止横屏 edn-->