我怎么锁定方向,以纵向方式,在iPhone网应用程序?
-
05-07-2019 - |
题
我要建一个iPhone网应用程序和要锁定的方向,以纵向方式。这可能吗?是否有任何网络的工具包扩展到这么做吗?
请注意,这是一个应用程序编写HTML和JavaScript移动野生动物园,这不是一个本地应用程序编写的目标。
解决方案
您可以根据视口方向指定CSS样式: 使用body [orient = <!> quot; landscape <!> quot;]或body [orient = <!> quot; portrait <!> quot;]
定位浏览器http://www.evotech.net /博客/ 2007/07 / Web开发 - 换了,iphone /
...然而
Apple解决此问题的方法是允许开发人员根据方向更改来更改CSS,但不能完全阻止重定向。我在其他地方发现了一个类似的问题:
http:// ask。 metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
其他提示
这是一个非常糟糕的解决方案,但它至少是某些东西(?)。我们的想法是使用CSS转换将页面内容旋转到准肖像模式。这里是JavaScript(用jQuery表示)代码,可以帮助您入门:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
代码期望页面的全部内容都位于body元素内部的div内。它在横向模式下旋转90度 - 回到肖像。
作为练习留给读者:div围绕其中心点旋转,因此它的位置可能需要调整,除非它是完全正方形。
此外,还有一个没有吸引力的视觉问题。当您更改方向时,Safari会缓慢旋转,然后顶级div会捕捉到不同的90度。为了更有趣,请添加
body > div { -webkit-transition: all 1s ease-in-out; }
到你的CSS。当设备旋转,然后是Safari,然后页面的内容。欺骗性!
这答案是不可能的,但我张贴于"后代"。我们希望,有一天,我们将能够做到这一点通过CSS@视的规则:
@viewport {
orientation: portrait;
}
规范(的过程):
https://drafts.csswg.org/css-device-adapt/#orientation-desc
MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation
根据MDN浏览器的兼容性表和下列文章中,看起来像有一些支持,在某些版本的即和歌剧院:
http://menacingcloud.com/?c=cssViewportOrMetaTag
这JS API规范也看起来相关的:
https://w3c.github.io/screen-orientation/
我不得不假设,因为它可能提议的 @viewport
项规则,它将有可能通过设定 orientation
在视区设置在一个 meta
标记,但是我没有成功,这一点为止。
随时更新这个答案,事情有所改善。
我们的html5游戏中使用了以下代码。
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
我想出了这种仅使用媒体查询旋转屏幕的CSS方法。查询基于我在此处找到的屏幕尺寸。 480px似乎是好的,因为没有/少数设备宽度超过480px或高度低于480px。
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Screen.lockOrientation()
解决了这个问题,虽然当时(2017年4月)的支持率不够普及:
https://www.w3.org/TR/screen-orientation/一>
https://developer.mozilla.org/en -US /文档/网络/ API / Screen.lockOrientation
我喜欢告诉用户将手机重新置于纵向模式的想法。 就像它在这里提到的那样: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...但是使用CSS代替JavaScript。
也许在新的未来,它将有一个开箱即用的解决方案......
2015年5月,
有一个实验功能可以做到这一点。
但它仅适用于Firefox 18 +,IE11 +和Chrome 38 +。
但是,它在Opera或Safari上还不起作用。
https://developer.mozilla.org/ EN-US /文档/网络/ API /屏幕/ lockOrientation#Browser_compatibility
以下是兼容浏览器的当前代码:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
这个或类似的CSS解决方案至少会保留您的布局,如果这是您所追求的。
根解决方案是考虑设备的功能而不是试图限制它们。如果设备不允许你适当的限制而不是简单的黑客是你最好的选择,因为设计基本上是不完整的。越简越好。
咖啡,如果有人需要它。
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
虽然您无法阻止方向更改生效,但您可以模仿其他答案中所述的更改。
首先检测设备方向或重新定向,然后使用JavaScript将类名添加到包装元素中(在本例中我使用body标签)。
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
然后,如果设备是横向的,请使用CSS将主体宽度设置为视口高度,将主体高度设置为视口宽度。让<!>#8217; s设置变换原点,而我们<!>#8217;重新开始。
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
现在,重新定位body元素并将其滑动(平移)到位。
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
受到@ Grumdrig的回答的启发,并且由于某些使用的说明不起作用,如果其他人需要,我建议使用以下脚本:
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
点击 在这里, 一教程和工作实例,从我的网站。
你不再需要用黑客只是为了看看jQuery的手机屏幕上的取向,也不应该使用。了,除非你真的使用。.
为了使这项工作在2015年,我们需要:
- Córdoba(任何版本虽然任何东西上述4.0是更好)
- 。(你甚至可以使用。、插件是兼容的)
和这些中的一个插件取决于你的Córdoba的版本:
- 网。yoik.科尔多瓦。插件。screenorientation(Córdoba < 4)
科尔多瓦插件增加净额。yoik.科尔多瓦。插件。screenorientation
- 科尔多瓦插件加córdoba-插画面取向(Córdoba>=4)
科尔多瓦插件加córdoba-插画面取向
和锁定屏幕的方向,只要使用这个功能:
screen.lockOrientation('landscape');
解开它:
screen.unlockOrientation();
可能的方向:
肖像主 方向是在主要的肖像的模式。
肖像辅助 方向是在次级肖像的模式。
风景-主 方向是在主要的横向模式。
风景-次 方向是在二次横向模式。
肖像 方位是肖像主或肖像学(传感器)。
的风景 方向是横向初级或横向学(传感器)。