• 380 阅读
  • 1 回复

基于jQuery/css 的判断iPad、iPhone、Android是横屏还是竖屏的代码

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

代码 复制 - 运行

<script type="text/javascript">
function orient() {
    if (window.orientation == 90 || window.orientation == -90) {
    //ipad、iphone竖屏;Andriod横屏
    $("body").attr("class", "landscape");
    rientation = 'landscape';
    return false;
    }
    else if (window.orientation == 0 || window.orientation == 180) {
    //ipad、iphone横屏;Andriod竖屏
    $("body").attr("class", "portrait");
    rientation = 'portrait';
    return false;
    }
    }
    //页面加载时调用
    $(function(){
    orient();
    });
    //用户变化屏幕方向时调用
    $(window).bind( 'orientationchange', function(e){
    orient();
    });
</script>





代码 复制 - 运行

<style type="text/css">
.landscape
{
 color:red;
}
.portrait
{
 color:blue;
}
</style>



测试页码:

代码 复制 - 运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script type="text/javascript" src="/dist/js/jquery/1.11.1/jquery.min.js"></script>

<style type="text/css">
.landscape
{
 color:red;
}
.portrait
{
 color:blue;
}
</style>
</head>
<body>

    <div>
    这是测试
    </div>
</body>
</html>
<script type="text/javascript">
function orient() {
    if (window.orientation == 90 || window.orientation == -90) {
    //ipad、iphone竖屏;Andriod横屏
    $("body").attr("class", "landscape");
    rientation = 'landscape';
    return false;
    }
    else if (window.orientation == 0 || window.orientation == 180) {
    //ipad、iphone横屏;Andriod竖屏
    $("body").attr("class", "portrait");
    rientation = 'portrait';
    return false;
    }
    }
    //页面加载时调用
    $(function(){
    orient();
    });
    //用户变化屏幕方向时调用
    $(window).bind( 'orientationchange', function(e){
    orient();
    });
</script>


来源:http://www.shangxueba.com/jingyan/1899561.html




代码 复制 - 运行

屏幕方向对应的window.orientation值:
    ipad: 90 或 -90 横屏
    ipad: 0 或180 竖屏
    Andriod:0 或180 横屏
    Andriod: 90 或 -90 竖屏
本帖最后由 张小鱼 于 2014-12-15 13:08 编辑
小鱼的淘宝店铺-多多支持哇

css实现ipad端横竖屏切换(ipad mini已测试成功)

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

css实现ipad端横竖屏切换(ipad mini已测试成功)

代码 复制 - 运行

<!Doctype html>  
    <html>  
   <head>  
     <meta charset="utf-8">  
     <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">  
     <title>横竖屏切换检测</title>  
     <style type="text/css">  
              .container{
                   margin:0 auto;
                   overflow:hidden;
                   background:#f0f;
                }
               .nav{
                    height:45px;
                    width:100%;
                    background:#faa;
               }
               .top{
                    position: relative;
                    width: 745px;
                    margin: 30px 0 0 12px;
                    height: 495px;
                    overflow: hidden;
                    background:#ff0;
                }
                 .content .left{
                    float:left;
                    margin:30px 0 0 12px;
                    height:500px;
                }
                 .content .right{
                    float:right;
                    width:225px;
                    background:#00f;
                    height:500px;
                    border:1px solid #f0f;
                }/*水平显示*/
@media all and (orientation:landscape){
                                 .container{
                                         width:1024px;
                                         }
                                 .content .left{
                                         width:746px;
                                          background:#0f0;
                                         }
                                 .content .right{
                                         margin-top:-500px;
                                         margin-right:12px;
                                         }
                                 }
/*垂直显示*/
                                 @media all and (orientation:portrait){
                                         .container{
                                                 width:768px;
                                                 }
                                         .content .left{
                                                 width:500px;
                                                 background:#f00;
                                                 }
                                         .content .right{
                                                 width:225px;
                                                 margin:30px 12px 0 0px;
                                                 }
                                         }
            </style>  
        </head>  
        <body>  
           <div class="container">
             <div class="nav">
               <h2>导航</h2>
             </div>
             <div class="top">
               <h2>顶部</h2>
             </div>
             <div class="content">
               <div class="left">
                 <h2>内容左侧</h2>
               </div>
               <div class="right">
               <h2>内容右侧</h2>
               </div>
             </div>
           </div>
        </body>  
    </html> 
小鱼的淘宝店铺-多多支持哇