Question

任何人都可以通过电话了解如何在横向上锁定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)

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

Answer 1

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

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

Lèsemajesté在这里写了一个很好的答案，其中涉及用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);
}

如何在移动webapps的横向上锁定ipad方向

1 个答案: