iOS에서 Phonegap을 사용하여 방향 변경을 올바르게 감지하려면 어떻게 해야 합니까?
JQTouch 참고 자료를 찾다가 아래의 오리엔테이션 테스트 코드를 발견했습니다.이것은 모바일 Safari의 iOS 시뮬레이터에서는 올바르게 작동하지만 Phonegap에서는 올바르게 처리되지 않습니다.제 프로젝트는 이 테스트 페이지를 죽이는 것과 같은 문제에 직면하고 있습니다.폰갭에서 자바스크립트를 사용하여 방향 변화를 감지할 수 있는 방법이 있습니까?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
제가 하는 일은 다음과 같습니다.
function doOnOrientationChange() {
switch(window.orientation) {
case -90: case 90:
alert('landscape');
break;
default:
alert('portrait');
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// Initial execution if needed
doOnOrientationChange();: 2019년 5월: window.orientation는 더 이상 사용되지 않는 기능이며 MDN에 따라 대부분의 브라우저에서 지원되지 않습니다.그orientationchange이벤트가 window.orientation과 연결되어 있으므로 사용하면 안 됩니다.
사용합니다window.onresize = function(){ checkOrientation(); }Orientation을 선택하면 window.orientation 또는 body width checking을 사용할 수 있지만, "window.onresize"는 적어도 제가 테스트할 기회가 있었던 대부분의 모바일 및 데스크톱 브라우저에서 가장 크로스 브라우저 방식입니다.
if (window.matchMedia("(orientation: portrait)").matches) {
// you're in PORTRAIT mode
}
if (window.matchMedia("(orientation: landscape)").matches) {
// you're in LANDSCAPE mode
}
iOS와 Phonegap도 잘 모르지만, eventListener를 추가함으로써 이를 수행할 수 있었습니다.저는 (당신이 참조한 예를 사용하여) 동일한 작업을 수행했지만 실행할 수 없었습니다.하지만 이것은 효과가 있는 것처럼 보였습니다.
// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation);
function updateOrientation(e) {
switch (e.orientation)
{
case 0:
// Do your thing
break;
case -90:
// Do your thing
break;
case 90:
// Do your thing
break;
default:
break;
}
}
PhoneGap Google 그룹에서 "오리엔테이션"이라는 용어를 검색하는 것이 좋을 수도 있습니다.
방향을 감지하는 방법에 대한 예로 제가 읽은 한 가지는 파이 가이입니다: (게임, js 파일).당신이 올린 코드와 비슷하지만 당신처럼...저는 그것을 작동시킬 수 없었습니다.
한 가지 주의할 점은 Listener가 작업한 이벤트입니다. 하지만 이것이 지나치게 집중적인 접근 방식인지는 잘 모르겠습니다.지금까지 그것이 저에게 효과가 있었던 유일한 방법이었지만, 더 나은, 더 능률적인 방법이 있는지 모르겠습니다.
UPDATE가 위의 코드를 수정했습니다. 지금 작동합니다.
비록 그 질문이 PhoneGap과 iOS 사용만을 언급하고 있고, 이미 답이 되었지만, 2019년에 JS로 화면 방향을 감지하는 더 넓은 질문에 몇 가지 포인트를 추가할 수 있습니다.
window.orientation속성이 더 이상 사용되지 않으며 Android 브라우저에서 지원되지 않습니다.방향에 대한 자세한 정보를 제공하는 새로운 속성이 있습니다.screen.orientation그러나 여전히 실험적이며 iOS Safari에서 지원하지 않습니다.따라서 최상의 결과를 얻으려면 다음 두 가지를 함께 사용해야 합니다.const angle = screen.orientation ? screen.orientation.angle : window.orientation.@benallansmith가 그의 논평에서 언급했듯이,
window.onorientationchange는 이트가시전에기되작 앞에 됩니다.window.onresize따라서 방향 변경 이벤트 후에 지연을 추가하지 않으면 화면의 실제 크기를 얻을 수 없습니다.오래된 모바일 브라우저를 지원하는 Cordova Screen Orientation Plugin이 있지만, 요즘은 사용할 필요가 없다고 생각합니다.
.
screen.onorientationchange이벤트입니다. 그러나 이 이벤트는 더 이상 사용되지 않으며 사용할 수 없습니다.답변의 완전성을 위해 추가되었습니다.
제 사용 사례에서 저는 실제 방향보다는 창의 실제 너비와 높이에 관심이 많았습니다. 이는 방향에 따라 분명히 달라집니다.그래서 제가.resize의 지연을 피하기 위한 이벤트orientationchange이벤트 및 창 치수 현실화:
window.addEventListener('resize', () => {
console.log(`Actual dimensions: ${window.innerWidth}x${window.innerHeight}`);
console.log(`Actual orientation: ${screen.orientation ? screen.orientation.angle : window.orientation}`);
});
주 1: 여기서 EcmaScript 6 구문을 사용했습니다. 필요하면 ES5로 컴파일하십시오.
2: 참고 2:window.onresize방향이 변경될 때뿐만 아니라 가상 키보드가 토글될 때도 이벤트가 발생합니다.
작하는동과 함께 .orientationchange이벤트, 페이지에 있는 요소의 정확한 차원을 얻기 위해 시간 초과가 필요했지만 matchMedia는 정상적으로 작동했습니다. 코드 최종코드내::
var matchMedia = window.msMatchMedia || window.MozMatchMedia || window.WebkitMatchMedia || window.matchMedia;
if (typeof(matchMedia) !== 'undefined') {
// use matchMedia function to detect orientationchange
window.matchMedia('(orientation: portrait)').addListener(function() {
// your code ...
});
} else {
// use orientationchange event with timeout (fires to early)
$(window).on('orientationchange', function() {
window.setTimeout(function() {
// your code ...
}, 300)
});
}
저는 이미 정답이 게시되고 받아들여졌다고 생각하지만, 제 자신이 경험한 문제와 여기에 언급된 다른 사람들이 있습니다.
에서는 창 창 치수)와 .window.innerWidth,window.innerHeight및 ) 및그window.orientation."orientationchange"발사되었습니다. 번, 러여번, 재은산window.orientation이라undefined의 발사 후 몇 밀리초 동안"orientationchange"(적어도 iOS에서는 Chrome에 있습니다.)
이 문제를 해결하는 가장 좋은 방법은 다음과 같습니다.
var handleOrientationChange = (function() {
var struct = function(){
struct.parse();
};
struct.showPortraitView = function(){
alert("Portrait Orientation: " + window.orientation);
};
struct.showLandscapeView = function(){
alert("Landscape Orientation: " + window.orientation);
};
struct.parse = function(){
switch(window.orientation){
case 0:
//Portrait Orientation
this.showPortraitView();
break;
default:
//Landscape Orientation
if(!parseInt(window.orientation)
|| window.orientation === this.lastOrientation)
setTimeout(this, 10);
else
{
this.lastOrientation = window.orientation;
this.showLandscapeView();
}
break;
}
};
struct.lastOrientation = window.orientation;
return struct;
})();
window.addEventListener("orientationchange", handleOrientationChange, false);
방향이 정의되지 않았거나 마지막으로 감지된 방향과 동일한지 확인하고 있습니다.둘 중 하나가 참이면 10밀리초 기다렸다가 방향을 다시 구문 분석합니다.방향이 적절한 값이면 다음을 호출합니다.showXOrientation 방향이 올바르지 않으면 매번 10밀리초씩 유효할 때까지 계속 점검 기능을 반복합니다.
저는 이 문제를 해결하기 위해 JSFidle을 만들었습니다. 하지만 JSFidle은 저를 위해 작동하지 않았고 다른 사람들이 같은 문제를 보고하지 않기 때문에 지원 버그가 닫혔습니다.다른 분들도 JS Fiddle로 만들고 싶으신 분들은 말씀해주세요.
감사합니다! 이것이 도움이 되길 바랍니다!
제가 한 일은 다음과 같습니다.
window.addEventListener('orientationchange', doOnOrientationChange);
function doOnOrientationChange()
{
if (screen.height > screen.width) {
console.log('portrait');
} else {
console.log('landscape');
}
}
장치가 가로 방향인지 감지하고 이 경우 "사이트를 보려면 방향 변경"이라는 내용의 스플래시 페이지를 추가하기 위해 이 코드를 찾았습니다.그것은 iOS, 안드로이드, 윈도우 폰에서 작동하고 있습니다.모바일 사이트의 풍경을 설정하는 것을 피해서 꽤 우아하기 때문에 매우 유용하다고 생각합니다.코드가 매우 잘 작동합니다.완전히 만족스럽지 않은 유일한 점은 가로 보기에 있는 페이지를 로드하는 경우 스플래시 페이지가 나타나지 않는다는 것입니다.
<script>
(function() {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if (isMobile.any()) {
doOnOrientationChange();
window.addEventListener('resize', doOnOrientationChange, 'false');
}
function doOnOrientationChange() {
var a = document.getElementById('alert');
var b = document.body;
var w = b.offsetWidth;
var h = b.offsetHeight;
(w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
}
})();
</script>
HTML:<div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>
if (window.DeviceOrientationEvent) {
// Listen for orientation changes
window.addEventListener("orientationchange", orientationChangeHandler);
function orientationChangeHandler(evt) {
// Announce the new orientation number
// alert(screen.orientation);
// Find matches
var mql = window.matchMedia("(orientation: portrait)");
if (mql.matches) //true
}
}
다음은 저에게 효과가 있었습니다.
function changeOrientation(){
switch(window.orientation) {
case 0: // portrait, home bottom
case 180: // portrait, home top
alert("portrait H: "+$(window).height()+" W: "+$(window).width());
break;
case -90: // landscape, home left
case 90: // landscape, home right
alert("landscape H: "+$(window).height()+" W: "+$(window).width());
break;
}
}
window.onorientationchange = function() {
//Need at least 800 milliseconds
setTimeout(changeOrientation, 1000);
}
는 시간초필요니 의 값 했습니다. 시간 초과가 필요했기 때문입니다.window.orientation .
아이폰용 폰갭에 jQTouch 앱을 만들고 있습니다.저는 며칠 동안 이 문제와 싸우고 있습니다.저는 이벤트 리스너 솔루션이 제안된 것을 몇 번 보았지만 작동하지 않았습니다.
결국 저는 다른 해결책을 생각해냈습니다.기본적으로 설정 시간 제한을 사용하여 차체의 폭을 주기적으로 확인합니다.너비가 320이면 방향이 세로이고 480이면 가로입니다.그런 다음 마지막 확인 이후 방향이 변경되면 각 방향에 대해 원하는 작업을 수행할 수 있는 세로 채우기 기능 또는 가로 채우기 기능을 실행합니다.
코드 (참고로 코드에 반복이 있다는 것을 알고 있습니다. 아직 트리밍을 시도하지 않았습니다!)
// get original orientation based on body width
deviceWidth = $('body').width();
if (deviceWidth == 320) {
currentOrientation = "portrait";
}
else if (deviceWidth == 480) {
currentOrientation = "landscape";
}
// fire a function that checks the orientation every x milliseconds
setInterval(checkOrientation, 500);
// check orientation
function checkOrientation() {
deviceWidth = $('body').width();
if (deviceWidth == '320') {
newOrientation = "portrait";
}
else if (deviceWidth == '480') {
newOrientation = "landscape";
}
// if orientation changed since last check, fire either the portrait or landscape function
if (newOrientation != currentOrientation) {
if (newOrientation == "portrait") {
changedToPortrait();
}
else if (newOrientation == "landscape") {
changedToLandscape();
}
currentOrientation = newOrientation;
}
}
// landscape stuff
function changedToLandscape() {
alert('Orientation has changed to Landscape!');
}
// portrait stuff
function changedToPortrait() {
alert('Orientation has changed to Portrait!');
}
언급URL : https://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-phonegap-on-ios
'programing' 카테고리의 다른 글
| SSIS - 잠재적인 데이터 손실로 인해 값을 변환할 수 없습니다. (0) | 2023.07.06 |
|---|---|
| Spark, Python 및 MongoDB가 함께 작동하도록 하기 (0) | 2023.07.06 |
| Django REST Framework에서 CORS를 활성화하려면 어떻게 해야 합니까? (0) | 2023.07.06 |
| Oracle에서 삭제 및 삭제 간의 차이 (0) | 2023.07.06 |
| UIScrollView에서 스크롤 방향을 찾으십니까? (0) | 2023.07.06 |