이번 프로젝트는 반응형 웹을 제작하였지만
급하게 진행되는 바람에 모바일 가로형을 생각하지 않고 진행이 되었고
뒤늦게 가로모드를 차라리 못쓰게 해달라는 요청을하셔서 이를 반영했습니다.
1. 디바이스의 회전을 막는다.
- 이는 어플리케이션으로 제작하여 권한을 얻지 못하는한 모바일 브라우저에서는 불가능한 기능입니다.
2. 가로방향 회전을 감지해 반대방향으로 회전시킨다.
- 구글링해서 찾았던 처음의 방법입니다. (관련 API 가 존재하는듯 하지만 지원하지 않는 브라우저가 많습니다.)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$(window).bind('orientationchange resize', function(event){
if (event.orientation) {
if (event.orientation == 'landscape') {
if (window.rotation == 90) {
rotate(this, -90);
} else {
rotate(this, 90);
}
}
}
});
function rotate(el, degs) {
iedegs = degs/90;
if (iedegs < 0) iedegs += 4;
transform = 'rotate('+degs+'deg)';
iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
styles = {
transform: transform,
'-webkit-transform': transform,
'-moz-transform': transform,
'-o-transform': transform,
filter: iefilter,
'-ms-filter': iefilter
};
$(el).css(styles);
}
|
orientationchange resize 메소드로 화면의 회전각을 리턴받은다음
반대방향의 같은크기의 각도로 회전시키는 소스코드입니다.
될것긑았지만 실제로는 동작하지 않는 소스코드였습니다.
3. (최후의 방법이었습니다) jQuery로 화면회전을 감지하고 가로모드에서는 사용할 수 없다는 레이어딤처리를 하였습니다. 이렇게 밖에 해결을 못하는게 굉장히 기분이 나빴습니다 ㅠㅠ
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$("document").ready(function() {
$(window).trigger("orientationchange");
});
$(window).bind("orientationchange", function(e) {
var pc_device = "win16|win32|win64|mac|macintel";
// 접속한 디바이스 환경
var this_device = navigator.platform;
if ( this_device ) {
// MOBILE
if ( pc_device.indexOf(navigator.platform.toLowerCase()) < 0 ) {
var orientation = window.orientation;
if (orientation == 90 || orientation == -90) {
$('.layer').css('display','block');
} else {
$('.layer').css('display','none');
}
}
}
});
|
이렇게 모바일 접속여부를 1차 확인 후 디바이스 회전을 감지하여
가로모드일때는 동작을 막는 레이어를 출력하는 형식으로 제한을 주었습니다.
뭔가 갈끔하게 해결되지 못해 아쉽지만 화면 회전을 감지할 수 있게되었내요.
출처 : https://start0.tistory.com/75
[JavaScript] 모바일 회전 감지 스크립트
출처 : https://codeday.me/ko/qa/20190324/142177.html
javascript – 모바일 웹 페이지에서 기기 회전 차단 - 코드 로그
예를 들어 Javascript를 사용하여 내 페이지에서 인물 모드로 모바일 장치를 사용하여 사용자를 방문하고 사용자가 휴대 전화를 가로로 돌릴 때 방향 변경을 중지 할 때이를 감지 할 수 있습니까? 내 페이지에는 세로보기 전용으로 최적화 된 게임이 있으며 가로 모드로는 원하지 않습니다. 우수 답변 자바 스크립트 사용 브라우저에서는 화면이 가로 또는 세로 모드인지 compensate using CSS인지 쉽게 판단 할 수 있습니다. 사용자가이 기능을 사용하
codeday.me
출처 : https://kcmschool.com/156
[JavaScript] PC, Mobile 디바이스 구분하기.
스크립트로 pc와 mobile를 구분하여 어떤 환경이냐에 따라 다르게 적용하기위해 검색 중 Navigator을 사용하여 접속환경을 구분할 수 있었다. 다음과 같은 조건문을 적용하여 환경을 구분한다. 1 2 3 4 5 6 7 8 9..
kcmschool.com
'Web Programming > JavaScript' 카테고리의 다른 글
| jQuery 를 이용한 SelectBox Selected 하는법 (0) | 2019.06.12 |
|---|---|
| Modal PopUp 사용하기 (0) | 2019.06.10 |
| jQuery 날짜를 지정하는 Datepicker (0) | 2019.05.26 |
| XSS 크로스 사이트 스크립팅 (0) | 2019.05.21 |