Question

我使用＆＃34; display：flex＆＃34; 和＆＃34; vmin＆＃34;为qwixx游戏提供在线记分卡。用于边距和字体大小。所以它使用完整的视口并且非常敏感。

但我的问题是智能手机/平板电脑的纵向模式以及缺少通过网页强制横向模式的可能性。

如果用户锁定了他的演示位置或使用应用程序显示不支持横向模式的页面（例如barcoo），我也希望在纵向模式下向他提供横向记分卡。

所以我尝试了＆＃34; transform：rotate（90deg）＆＃34; 。

旋转工作得很好，但响应缩放不是。浏览器似乎没有考虑旋转来计算flex布局的宽度和高度。

我使用的相关CSS：

html, body, .container-fluid {
  height: 100%;
}

.row {
  display: flex;
  display: -webkit-flex;
  height: calc(100% / 6);
}

.btn {
  flex: 1;
  -webkit-flex: 1;
}

body {
  webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

@media all and (orientation:portrait) {
  body {
    webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

有人已经提出过这个问题并给我一个提示如何解决这个问题？或者可以给我一个替代解决方案的提示？

所需的行为是：在纵向模式下，页面应旋转90度，方法是使用完整视口保持弹性框的响应缩放行为。

Answer 1

我想我找到了一个解决方案，我的css示例中重要且缺少的声明是：

围绕定义的角（变换原点）旋转
设置绝对位置，因为带有偏移的旋转（90度=左：100vw）
交换高度和宽度定义

所以改变后的相关css现在看起来像：

.row {
  display: flex;
  display: -webkit-flex;
  height: calc(100vh / 6);
}

.btn {
  flex: 1;
  -webkit-flex: 1;
}

@media all and (orientation:portrait) {
  .container-fluid {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: top left;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: top left;
    transform: rotate(90deg);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100vh;
    height: 100vw;
  }

  .row {
    height: calc(100vw / 6);
  }
}

这非常有效。唯一缺少的是现在的iOS问题，他们没有从视口大小中调整状态栏的大小。但这是现有解决方案的一个已知问题，所以我认为这是可以解决的。

你可以在这里测试一下：http://dqwixx-staging.herokuapp.com/（关心页面视图可能需要几秒钟），浏览器窗口（宽度越大）或纵向模式的智能手机/平板电脑。

与变换旋转一起显示flex

1 个答案: