Question

我正在尝试为此网站（http://purcraft.com/madeinla/home5.html）完成主页的问题，由于宽高比，我想确定这会被强制进入横向模式。不理想，但只会留下大量的白色空间。

听说你可以使用CSS3做到这一点，但这段代码效果不佳。在设备上，当你在肖像和桌面上时，它似乎会将div拉伸一下，一旦达到1280px就会看到效果。很奇怪。我怎样才能真正做到这一点，或者我应该只使用一些JavaScript？

这是我目前正在使用的CSS：

@media only screen and (orientation:portrait){
    #made-in-la-canvas {  
        display:block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@media only screen and (orientation:landscape){
    #made-in-la-canvas {
        display:block;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

Answer 1

如果我是网页设计师，我不会强迫人们使用风景或肖像。我会在您网站的界面中考虑肖像。我不认为移动Safari可以在横向上强制使用，因为有些用户可以通过控制中心简单地打开纵向定位锁。

尝试仅使用CSS在设备上强制横向模式

1 个答案: