Question

我正在一个网页上工作，我希望在具有内置网络浏览器的数字标牌屏幕上显示。由于屏幕没有内置＆＃34;转动屏幕90度（肖像）＆＃34;模式我必须做一个解决方法。

我尝试使用以下CSS：

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

我正在使用此页面的液体布局（按百分比工作），此页面将显示在1080x1920屏幕上（纵向垂直悬挂）

然而，当我在浏览器中显示页面而不旋转屏幕时，一切看起来都很好..当我旋转它时，它会掉出屏幕并且元素没有正确对齐而且页面感觉放大而不是拉伸在浏览器中。

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

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");}
});

在小提琴中这样做会使身体向上偏移到左边，所以你必须弄清楚如何解决这个问题，这里是我的小提琴，我还包括一个函数来获取一个位置可能有用的元素：

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

将页面旋转90度

1 个答案: