Question

我使用以下代码检查iPad的方向。只有在我旋转设备或更改iPad的方向时才会调用此方法。如果以横向模式启动应用程序，当我导航到此屏幕时，下面的方法不会被调用。如何在不旋转iPad的情况下检测iPad的方向。

$(window).bind('orientationchange', function (event) {
    if (event.orientation == "landscape") {
        set frame for landscape
    } else {
        set frame for portrait
    }
});

Answer 1

这将检查iPad的存在，然后将高度与宽度进行比较。

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="nav navbar-nav navbar-left">

            <a class="navbar-brand hidden-xs" ui-sref="root.list.home">My shop</a>
            <a class="navbar-brand visible-xs" ui-sref="root.list.home"><span
                    class="glyphicon glyphicon-shopping-cart"></span></a>

            <div class="pull-left">

                 <form class="navbar-form" role="search" ng-submit="c.Product.search()">

                  <div class="input-group">


                      <input type="text" class="form-control" name="srch-term" id="srch-term"/>


                      <div class="input-group-btn" style="width:1%">
                          <button class="btn btn-default btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i>
                          </button>
                      </div>


                  </div>

              </form>


            </div>


        </div>


        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden-xs"><a ui-sref="root.item.postAd">My home</a></li>
                <li class="visible-xs">
                    <a ui-sref="root.item.postAd">
                        <span class="glyphicon glyphicon-home"></span>
                    </a>
                </li>

                <li uib-dropdown>
                    <a uib-dropdown-toggle href="#">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
                        <li><a ui-sref="root.login">Log in</a></li>
                    </ul>
                </li>

            </ul>    
        </div>   
    </div>
</nav>

Answer 2

这也应该有效：

$(window).bind('orientationchange', function(event) {
  alert('new orientation:' + event.orientation);
});

Answer 3

$(window).on('load orientationchange', function(event) {
    if(event.orientation == "landscape")
    {
        set frame for landscape
    }
    else
    {
        set frame for portrait
    }
});

同时添加load个事件。如果触发window.load时DOM中的屏幕可用，这将有所帮助。屏幕之后的事件trigger动态注入DOM（如@Tushar所建议的那样）。

请注意，orientation change或resize事件不会发生最初作为页面加载触发，如果你想最初运行它们，你会必须包括load事件。或trigger稍后如果它的话依赖于DOM的动态部分。

使用javascript检测iPad设备方向

3 个答案: