如何在移动网络应用程序的横向锁定 ipad 方向答案

【问题标题】：how to lock ipad orientation in landscape for mobile webapps如何在移动网络应用程序的横向锁定 ipad 方向
【发布时间】：2012-02-24 22:29:42
【问题描述】：

任何人都可以告诉如何在移动 web 应用程序的横向锁定 ipad 方向。即使它翻转它也不应该旋转成纵向。

     function reorient(e) {
        var portrait = (window.orientation % 180 != 0);
        $("body").css("-webkit-transform", !portrait ? "rotate(90deg)" : "");
        alert("hi");
      } 
       window.onorientationchange = reorient;
       window.setTimeout(reorient, 0)

我尝试了这些代码，但它只影响设计。在我的情况下它应该翻转

【问题讨论】：

可能重复？ stackoverflow.com/questions/4806938/…

标签： jquery ipad html css

【解决方案1】：

您可以使用媒体查询在两个方向上控制 CSS

media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)

Lèse majesté 在这里为这个问题写了一个很好的答案，其中涉及使用 jquery 对抗轮换：Blocking device rotation on mobile web pages

$(window).bind('orientationchange resize', function(event){
  if(event.orientation) {
    if (event.orientation == 'landscape') {
      if (window.rotation == 90) {
        rotate(this, -90);
      } else {
        rotate(this, 90);
      }
    }
  });

function rotate(el, degs) {
  iedegs = degs/90;
  if (iedegs < 0) iedegs += 4);
  transform = 'rotate('+degs+'deg)';
  iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
  styles = {
    transform: transform,
    '-webkit-transform': transform,
    '-moz-transform': transform,
    '-o-transform': transform,
    filter: iefilter,
    '-ms-filter': iefilter
  };
  $(el).css(styles);
}

【讨论】：