Javascript 防止横向移动网站
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/43634583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent landscape orientation Mobile-website
提问by Soccerlife
At the moment, i'm working on my site. The mobile version is almost done. But if I rotate my screen (smartphone for example) in landscape, it looks horrific. I tried to change it with queries but the result isn't quite nice. Is there a way to lock orientation so that it always stays in portrait-mode?
目前,我正在我的网站上工作。手机版差不多就完成了。但是如果我横向旋转我的屏幕(例如智能手机),它看起来很可怕。我试图用查询来改变它,但结果不太好。有没有办法锁定方向,使其始终保持纵向模式?
Edit:
编辑:
I thought maybe I could do something with the height and the width. So that if the width of the screen is larger then the height, the body should rotate 90 degrees.
我想也许我可以对高度和宽度做些什么。因此,如果屏幕的宽度大于高度,则主体应旋转 90 度。
采纳答案by Shakti Phartiyal
You need to add the following meta tag to your page header like so:
您需要将以下元标记添加到您的页眉,如下所示:
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
Or you can have separate CSS files for landscape and portrait mode like so:
或者您可以为横向和纵向模式使用单独的 CSS 文件,如下所示:
<link rel="stylesheet" type="text/css" href="css/landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/portrait.css" media="screen and (orientation: portrait)">

