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

Question

我目前正在尝试为此站点 ( http://purcraft.com/madeinla/home5.html ) 完成的主页有问题，由于宽高比，我想确保它被强制进入横向模式。不理想，但它只会在肖像中留下大量空白。

听说您可以使用 CSS3 执行此操作，但此代码无法完美运行。在设备上，当你在纵向和桌面上时，它似乎会稍微拉伸(stretch) 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

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