상세 컨텐츠

본문 제목

모바일 화면크기 전체화면으로 변경하기, 주소표시줄 없이 완전 전체화면 jquery/ javascript 이용 / 스마트폰페이지 스마트폰전체화면

IT공부방/jQuery, ajax, java

by 동해둘리 2019. 5. 29. 08:10

본문

반응형

모바일 브라우저에서 HTML 문서를 로딩하게되면 아래와 같이 상단부분에 주소표시줄이 계속 남이있는 경우가 많습니다.

 

스마트폰전체화면

 

 

 

 

화면을 스크롤해서 올려봐도 스마트폰 최 상단의 상태바는 없어지지 않는 경우가 많습니다

 

 

 

 

모바일전체화면 javascript

 

 

 

 

게임을 하거나 동영상을 플레이하거나,  인강등의 교육컨텐츠 등을 보여줄때는 전체화면을 다  사용해야 가독성에서도 그렇고 인터페이스 측면에서도 더 좋은 효과를 얻을 수 있습니다.

 

 

jquery 와 javascript/CSS 등을 이용하면 모바일 전체화면을 다 사용할 수 있습니다

 

 

최초에 페이지에 접속을 하면 아래와 같이 보여지게 됩니다. 

 

모바일주소표시줄

 

이 상태에서 스마트폰을 가로로 회전을 시키면 아래와 같이 보여지게 됩니다.

 

스마트폰전체화면설정하기

 

 

세로모드 또는 가로모드에서 [가로모드로 고정하기] 버튼을 클릭하게 되면 아래와 같이 화면을 100% 꽉 채우게 됩니다. 이때 [전체화면을 종료하려면 상단에서 드래그하여 뒤로 버튼을 터치하세요] 라는 안내창이 나타났다가 사라지게 됩니다.

 

모바일화면전체

이상태에서는 스마트폰을 세로로 돌려도 화면은 그래도 가로모드로 고정되어 있게됩니다.

 

 

[해제하기] 버튼을 클릭하게 되면 고정모드가 해제되고, 스마트폰을 세로로 돌리면 세로로 바뀌게 됩니다. 이때에도 화면을 100% 채우는 건 유지되게 됩니다 

 

 

전체모드를 해제하려면 스마트폰의 뒤로 버튼을 클릭하면 처음처럼 주소표시줄이 나타나게 됩니다.

 

 

전체 소스는 다음과 같습니다. 

 

 

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<title>Changing Screen Orientation with Javascript : Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<style type="text/css"> 
html {
    height: 100%;
}
body {
   margin: 0px;
    background-color: #336699;
    height: 100%;
    width: 100%;
}
#container {
}
#container:fullscreen {
    width: 100%;
    height: 100%;
    background-color: green;
}
 
#container:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background-color: green;
}
 
#orientation-status {
    text-align: center;
    margin: 30px 0;
    color: white;
}
 
button {
    background-color: white;
    border: 1px solid #336699;
    color: #336699;
    width: 300px;
    padding: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    outline: none;
}
 
#lock-landscape-button {
    
}
 
#unlock-button {
    display: none;
}
 
 
 
</style>
</head>
 
 
 
<body>
 
<div id="container">
    <p id="orientation-status"></p>
    <div id="buttons-container">
        <button id="lock-landscape-button">가로모드로 고정하기</button>
        <button id="unlock-button">해제하기</button>
    </div>
</div>
 
<script>
 
var _LOCK_BUTTON = document.querySelector("#lock-landscape-button"),
    _UNLOCK_BUTTON = document.querySelector("#unlock-button"),
    _STATUS = document.querySelector("#orientation-status");
 
if ( screen.orientation.type == "landscape-primary") {
    _STATUS.innerHTML = "가로모드";
}
else {
    _STATUS.innerHTML = "세로모드";
}
 
 
// 가로모드로 고정하기 버튼이 클릭된 경우 
document.querySelector("#lock-landscape-button").addEventListener('click', function() {
    if(document.documentElement.requestFullscreen)
        document.querySelector("#container").requestFullscreen();
    else if(document.documentElement.webkitRequestFullScreen)
        document.querySelector("#container").webkitRequestFullScreen();
 
    screen.orientation.lock("landscape-primary")
        .then(function() {
            _LOCK_BUTTON.style.display = 'none';
            _UNLOCK_BUTTON.style.display = 'block';
        })
        .catch(function(error) {
            alert(error);
        });
});
 
 
 
// 히제하기 버튼이 클릭된경우 
 
document.querySelector("#unlock-button").addEventListener('click', function() {
    screen.orientation.unlock();
 
    _LOCK_BUTTON.style.display = 'block';
    _UNLOCK_BUTTON.style.display = 'none';
});
 
 
 
// 스마트폰을 가로 또는 세로로 변경한 경우 
 
screen.orientation.addEventListener("change", function() {
 
 
    if ( screen.orientation.type == "landscape-primary") {
        _STATUS.innerHTML = "가로모드";
    }
    else {
        _STATUS.innerHTML = "세로모드";
    }
 
 
});
 
 
 
// on exiting full-screen lock is automatically released
document.addEventListener("fullscreenchange", function() {
    _LOCK_BUTTON.style.display = 'block';
    _UNLOCK_BUTTON.style.display = 'none';
});
 
 
 
document.addEventListener("webkitfullscreenchange", function() {
    _LOCK_BUTTON.style.display = 'block';
    _UNLOCK_BUTTON.style.display = 'none';
});
 
 
 
</script>
</body>
</html>
cs
반응형
저작자표시

'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글

웹사이트 출력 이벤트 잡아서 처리하기, 특정 DIV 내용만 출력하기 ... 웹페이지 인쇄이벤트, 출력이벤트, 웹사이트 프린트이벤트  (0) 2019.07.31
window load / document ready , 페이지의 모든 요소가 로딩된 후에 특정 javascript 실행하기 (이미지로딩/동영상로딩/페이지로딩 등등)  (0) 2019.06.14
jQuery Slider 제이쿼리 슬라이더/갤러리 - 다양한 기능의 lightslider  (0) 2019.05.16
엑셀파일로 저장, PHP등에서 엑셀저장 excel file save in php, asp etc  (0) 2019.03.21
웹사이트 내에서 진동울리기 javascript 활용 website vibration  (0) 2019.03.19

관련글 더보기

댓글 영역

티스토리툴바