将页面旋转 90 度答案

【问题标题】：Rotating a page 90 degrees将页面旋转 90 度
【发布时间】：2015-03-22 14:16:58
【问题描述】：

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

我正在尝试使用以下 CSS：

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

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

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

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

【问题讨论】：

如果它会以这种方式挂起，只需将其设为 1080x1920，它就会自行修复。无需对变换感到怪异。
Hmm....
stackoverflow.com/questions/10732391/… 勾选此项，根据您使用的浏览器，旋转会有所不同...（坏消息！呵呵）更新：这是更好的示例：stackoverflow.com/questions/14233341/…
@TomKriek 我会，但这意味着屏幕应该能够将自己置于纵向模式（它不能）;)
@JJGrootveld 你当然可以。 How to in windows 只需将屏幕设置为纵向模式并打开浏览器即可。并表现得像一个普通的页面，但更长更苗条。

标签： html css transform

【解决方案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 中执行此操作会定位身体，使其向上和向左偏移，所以你必须弄清楚如何解决这个问题，这是我的小提琴，我还包含一个函数来获取一个位置可能有用的元素：

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

【讨论】：