旋转页面90度

Question

我正在开发一个网页，希望在内置网络浏览器的数字标牌屏幕上显示。由于该屏幕没有内置“将屏幕旋转90度（纵向）”模式，因此我需要进行一些变通。

我尝试使用以下CSS：

body{
 transform: rotate(-90deg);
 ...
}

我在这个页面使用了流式布局（按百分比工作），并且该页面将在1080x1920的屏幕上显示（以纵向肖像模式悬挂）。

然而，当我在没有旋转屏幕的情况下在浏览器中显示页面时，一切似乎都很正常。但是当我旋转它时，它就会跑出屏幕，元素不正确地对齐，并且页面感觉被缩放而不是在浏览器中被拉伸。

有人有想法如何修复/编写代码吗？ 如果需要更多信息或者代码，请告诉我，我将在此处发布。

- JJGrootveld

---

如果它会以那种方式悬挂，只需将其设为1080x1920，它就会自行修复。无需使用变换。 - Rimble

嗯... - Jonast92

请查看此链接，页面旋转效果会因使用的浏览器而异（不太好的消息！呵呵）。更新：这个例子更好一些：https://dev59.com/tWYq5IYBdhLWcg3wvzGm。 - Julo0sS

@TomKriek 我想这样做，但这意味着屏幕必须能够自动切换为竖屏模式（而它无法实现）;) - JJGrootveld

也许值得探索一下transform-origin属性。它可能会进行变换，但是从错误的点开始（例如，从左上角旋转而不是右下角）。 - Daniel Apt

Answer 1

当您旋转身体时，需要交换高度和宽度的值，就像这样：

$("body").click(function() {
var height = $(window).height();
var width = $(window).width();
if ($(this).css("transform").indexOf("-1") == -1){
    $(this).css("transform", "rotate(-90deg)");
    $(this).css("width", height + "px");
    $(this).css("height", width + "px");}
else{
    $(this).css("transform", "rotate(0deg)");
    $(this).css("width", width + "px");
    $(this).css("height", height + "px");}
});

在Fiddle中这样做会使body的位置向上和向左偏移，所以你需要想办法解决这个问题。这是我的fiddle，我还包括了一个获取元素位置的函数，可能会有帮助：

http://jsfiddle.net/jz0odbbz/3/

- Joe Sager