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

发布于 2025-01-01 10:59:49 字数 391 浏览 0 评论 0原文

谁能告诉我如何在移动网络应用程序中锁定横向的 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)

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

原文

can anyone tel how to lock ipad orientation in landscape for mobile webapps. even if it flip it should not rotate into portrait.

     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)

i tried these code but it affecting only the design . where as in my case it should flip

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

源来凯始玺欢你 2025-01-08 10:59:49

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

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

Lèse majesté 在这里对此问题写了一个很好的答案，其中涉及使用 jquery 来对抗旋转：阻止移动网页上的设备旋转

$(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);
}

You could control the CSS in both orientations with a media query

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

Lèse majesté wrote a good answer to this question here which involves countering the rotation with 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);
}

回复收藏 0 原文

~没有更多了~