有没有办法在移动设备上强制水平/横向布局? [英] 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.

推荐答案

有一个 hack 可以实现这一点，但我强烈建议不要使用它 - 您的设计应该适应有人处于纵向还是横向模式.

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.

第一步:查询window.orientation 属性以查看您是处于横向还是纵向模式

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

第 2 步:如果您处于纵向模式，请在环绕整个页面的 div 上使用 -webkit-transform 旋转 (-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屋！