旋转设备时,是否可以避免在Safari for iOS中过渡到横向视图？
iOS Safari有"orentationchange"事件,我试图拦截它并禁用默认行为,如下所示:
<html>
<head>
<script type="text/javascript">
function changeOrientation(event) {
alert("Rotate");
event.preventDefault();
}
</script>
</head>
<body onorientationchange="changeOrientation(event);">
PAGE CONTENT
</body>
</html>
但是当我在iPhone上测试页面时,当我旋转设备时会显示警报,但视图会切换到横向.似乎event.preventDefault()不会停止旋转.
有没有办法阻止这种行为？
我试图禁用电话轮换,影响我的一个HTML5移动应用程序的网页.没有重新组织布局,调整大小,方向更改行为.
我想要它,以便您旋转手机,加载的初始布局将保持不变,迫使用户以原始方向使用该应用程序.用户逻辑有许多细微之处,我真的觉得这在我的应用程序中是必需的,所以请不要对这个选择做出评论,而应该在第一句话中帮助解决我的问题.
我试着聆听既有"orientationchange"和"调整大小"的活动,并呼吁的preventDefault和stopPropagation他们,以防止重组页面打开时以适应横向视图的任何浏览器的行为.好吧,显然防止了任何事情(理想情况下).
window.addEventListener("orientationchange", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
window.addEventListener("resize", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
完全没有区别.浏览器仍在Android(包括pre2.1和之后)和iPhone 4-5上重新组织页面.
尝试过meta标签
<meta name="viewport" content="initial-scale=1.0, user-scalable=no />
然后生气了,试过了
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
两者都没有区别.
在StackOverflow上疯狂地看了一下,看到我在第1步中做了几次.在那里多次出现......再次尝试确保我没有弄乱一些东西.没工作.
我骄傲地吮吸着,然后决定因为骄傲而继续撞到一堵砖墙,然后真的被我的骄傲所吸引并贴在这里.
HALP.
我在这个问题上看到了类似的问题,但它们与本机应用程序有关.我为浏览器(Safari)中运行的iPhone/iPad构建了Web应用程序.
我想知道是否有办法防止浏览器中的方向改变,也许是通过一些元标记.我知道视口元标记,它允许您指定缩放和缩放功能,因此可能会有类似的方向.
我怀疑这是可能的,但我想我只是在这里提出一个问题.
我正在iPad的浏览器中构建一个应用程序,并想知道是否可以锁定视口的方向？我查了一下苹果的文档,我发现的唯一的东西是只读的:https://developer.apple.com/documentation/webkitjs/domwindow/1632568-orientation
我认为这意味着无法在浏览器中锁定方向.有人有任何想法吗？
如何monitorOrientation在全局范围内禁用sencha touch中的属性？
请帮忙.
我已经为iPad开发了一个网络应用程序/网站,但我无法让它保持固定的纵向视图.
由于应用程序的设计方式,我不希望它在横向模式下旋转和工作.
我已经尝试了视口设置的各种配置,但仍然无法正常工作.
我不是很擅长JavaScript,所以复制粘贴选项最好用CSS/HTML.
提前致谢.
当iPhone改变方向时,我只是不希望网站改变方向.
可能吗？
我有一个 html5 自定义视频播放器，现在我想点击移动设备上的全屏图标将屏幕旋转到横向，反之亦然，就像在 youtube 中一样。
这是我的 HTML
<div id="video-block">
<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
<source src="INPUT VIDEO URL HERE"/>
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
View Fullscreen!
</button>
</div>
这是js
$(document).ready(function() {
// rotate function
function rotateVideoPlayer() {
var width = $(window).width();
var height = $(window).height();
$("#video-block").width(0);
$("#video-block").height(0);
console.log(width, height);
// document.body.scrollTop = document.documentElement.scrollTop = 0
if (width > height) {
console.log("landscape");
$("#video-block").width(width);
$("#video-block").height(width * 9 / …javascript ×5
iphone ×4
html ×3
ipad ×3
orientation ×3
jquery ×2
mobile ×2
rotation ×2
android ×1
css ×1
extjs ×1
html5 ×1
html5-video ×1
ios ×1
meta-tags ×1
safari ×1
sencha-touch ×1
webkit ×1