有没有办法强制移动设备上的水平/横向布局？ [英] Is there a way to force horizontal / landscape layout on mobile devices?

问题描述

我正在构建一个网站的移动版本，在这种特定情况下，它在水平布局中看起来很完美。有没有办法强制这种布局，无论用户设置是什么？

I'm building a mobile version of a website, and in this specific case it would look perfect in horizontal layout. Is there a way to force this layout no matter user setting are?

一些通用方式的答案值得赞赏，但如果您知道如何在任何特定平台上实现这一点（iPhone，android ..）所以也许我们可以收集一套体面的规则来瞄准大多数移动用户。

Answer with some universal way is appreciated, but also if you know how to achieve this on any specific platform (iPhone, android..) so maybe we can collect a decent set of rules to target majority of mobile users.

推荐答案

那里是一个可以实现这一目标的黑客，但我认真反对使用它 - 你的设计应该适应某人是纵向还是横向模式。

There is a hack that will accomplish this, but I seriously advise against using it - your design should adapt to whether someone is in portrait or landscape mode.

步骤1：查询 window.orientation 属性，看你是否处于横向或纵向模式

Step 1: Query the window.orientation property to see if you're in landscape or portrait mode

第2步：如果您处于纵向模式，请在包裹整个页面的div上使用-webkit-transform rotate（-90）将其强制转换为横向布局。

Step 2: If you're in portrait mode use a -webkit-transform rotate (-90) on a div that's wrapping your entire page to force it into a landscape layout.

这将无法正常工作 - 浏览器UI仍将处于纵向模式，但可能用户会发现他们应该将手机旋转回来进入横向模式以查看内容。这对用户来说非常烦人 - 他们可能有充分的理由试图以纵向模式阅读您的网站。

This won't work quite correctly - the browser UI will still be in portrait mode, but presumably the user will figure out that they're supposed to rotate the phone back into landscape mode in order to view the content. This is incredibly annoying to users - there is probably a good reason they are trying to read your site in portrait mode.

这篇关于有没有办法强制移动设备上的水平/横向布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！