html - 将页面旋转 90 度

Question

我正在处理一个网页，我想在具有内置网络浏览器的数字标牌屏幕上显示该网页。由于屏幕没有内置的“将屏幕旋转 90 度(纵向)”模式，我必须采取一种解决方法。

我正在尝试使用以下 CSS:

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

我正在为此页面使用流式布局(按百分比工作)并且此页面将显示在 1080x1920 屏幕上(以纵向模式垂直悬挂)

但是，当我在不旋转屏幕的情况下在浏览器中显示页面时，一切似乎都很好。当我旋转它时，它从屏幕上掉下来并且元素没有正确对齐并且页面感觉放大而不是拉伸(stretch)浏览器。

有没有人知道如何修复/编码这个问题？ 如果您需要更多信息或代码，请告诉我，我会在此处发布。

Answer 1

当你旋转body时你需要切换高度和宽度值，像这样:

$("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 ，我还包含了一个获取 an 位置的函数可能有用的元素:

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