명확히하기 위해 window.screen.availHeight은 모든 도구 모음을 포함하여 브라우저 창에 포함될 수있는 최대 높이를 나타냅니다. 아래 그림을 보면 548이 iOS 메뉴 바가없는 전체 브라우저의 높이에 불과하다는 것을 알 수 있습니다. 따라서 availHeight 속성은 콘텐츠에 사용할 수있는 공간이 아니라 전체 브라우저를 표시하도록되어 있습니다. 데스크톱 브라우저에서 브라우저가 최대화되었는지 여부를 감지하기 위해 window.outerHeight을 window.screen.availHeight과 대조하여 사용합니다.
그러나 바로 들어가기 전에, 최소한의 UI 높이보기에 대한
. 단지 iOS 전용 동작이므로
spec에는 표준 속성이 없습니다. Apple은 이러한 정보를 노출하기 위해 일부 비표준 속성을 넣을 수 있습니다. 그러나
window과
window.screen 개체를 확인한 결과 아무 관계가 없습니다. 그게 지금의 feasiblity를위한 것입니다.
사이드 뷰로서, 새로운 뷰포트 크기를 알고 resize 이벤트로 알리는 것과 미리 크기를 알리는 것 사이의 차이점은 무엇입니까? resize 이벤트 이전에 수행 할 수있는 작업량은 항상 최소화되어야하며, 레이아웃 변경이 발생해야하는 경우 리사이즈 이후에 발생해야합니다. 따라서 숫자를 미리 알고 있으면 도움이되지 않습니다.
사용자가 웹 페이지를 열고 즉시 스크롤을 시작한다고 생각해보십시오. 전에 숫자를 알고 있다면, 최소한의 UI는 아니기 때문에 스크린의 초기 렌더링을 위해 할 수있는 일은 아무것도 없습니다. 무엇을해야할지, 사용자가 스크롤을 시작한 후에는 즉시 시작해야합니다.
이제는 최소한의 UI처럼 보이는 또 다른 크기 조정 이벤트가 있습니다. iPad에서 두 개 이상의 탭이있는 경우 높이를 조금 더 축소하여 탭을 표시합니다. 따라서 사용자가 다른 탭을 닫으면 현재 페이지가 조금 더 커지고 크기 조정 이벤트가 트리거됩니다. 그러나이 새로운 높이는 최소 UI의 높이와 다릅니다. 이것은 최소한의 UI 만이 Fullscreen-API와 같은 모드가 아니라 높이의 또 다른 향상이라고 제안합니다.
따라서 페이지가 높이에 종속되어있는 경우 염두에 두어야 할 변경 사항이 너무 많습니다. 하드 코딩은 단기 솔루션 일뿐입니다. 언젠가는 이러한 모든 장치를 테스트 할 수 없습니다.
그러나 크기 조정 이벤트에는 단점이 있으며, 너무 늦을 수있는 최소 UI에 들어가서 트리거됩니다. 따라서 키가 커지기 시작하면 그 사실을 알 수 없습니다. 그것이 내가 크기를 변경하기 위해 애니메이션을 시작하는 데 필요한 맞춤 유체 UI가 있다고 생각하는 곳입니다.이 경우이 이벤트의 시작을 알기 위해 innerHeight에 대한 간격 검사를 사용할 수 있으며 즉시 변경되기 시작합니다.
어쨌든 스크롤링 횟수를 미리 알고 있어야하는 경우 CSSOM을 통해 사용할 수 없다고 생각합니다.
편집 : 최소한의-UI를 검출
은 아직 필요하지 않은 치수를 알고 다른 것입니다. Touch 이벤트를 사용하면보기가 최소 UI를 입력했는지 여부를 감지 할 수 있습니다.
, touchmove 및 touchend 이벤트의 innerHeight를 확인하면 최소한의 UI를 감지하는 데 도움이됩니다. 순진한 접근 방식은 터치가 끝날 때 innerHeight가 증가했는지 여부를 확인하는 것입니다. 이것은 대부분의 경우에 적용될 수 있지만 문제가 있습니다. 사용자가 최소 UI 전환 도중에 만지면 가장 적은 UI를 입력 할 것인지 확실하지 않을 수 있습니다. 마지막으로보고 된 높이를 touchmove으로 확인하면 기본보기로 되돌릴지를 확인할 수 있습니다.
어쨌든, 아래 코드를 확인하여 작동 방식을 확인할 수 있습니다. 버그가 있으며 개선 될 수 있지만 아이디어를 얻을 수 있습니다. 나는 당신이 전체 페이지를 스크롤 할 수 없기 때문에 그것을 codepen에 두지 않았습니다.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<style>
div {
position: fixed;
left: 10px;
}
#dd1 {
top: 10px;
}
#dd2 {
top:30px;
}
#dd3 {
top: 50px;
}
</style>
<body>
<div id="dd1">Start: <span id="d1"></span></div>
<div id="dd2">Move: <span id="d2"></span></div>
<div id="dd3">End: <span id="d3"></span></div>
<section style="position:relative;height:3000px;"></section>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
var d3 = document.querySelector("#d3");
var start_height=window.innerHeight;
var cur_height;
var end_height;
var normal_state=true;
var entered_minimal_ui=false;
//window.addEventListener("touchstart", start_handler, false);
window.addEventListener("touchmove", move_handler, false);
window.addEventListener("touchend", end_handler, false);
document.ontouchstart = control_touching;
d1.textContent=start_height;
function move_handler() {
if(cur_height>start_height) {
// we *may* enter the minimal-ui, but it's not final yet
d2.textContent="I detected minimal-ui faster. (Current: "+cur_height+")";
normal_state=false;
}
cur_height=window.innerHeight;
}
function end_handler() {
end_height=window.innerHeight;
if(end_height>start_height && end_height>=cur_height) {
d3.textContent="Hello minimal-ui. (End: "+end_height+")";
normal_state=false;
entered_minimal_ui=true;
}
else if(!entered_minimal_ui) {
d3.textContent="We didn't enter minimal-ui. Reverting.";
normal_state=true;
}
}
function control_touching() {
document.ontouchstart = function(e){
if(normal_state) {
return true;
}
else // just for testing
e.preventDefault();
}
}
</script>
</body>
</html>
참고 :
전체 화면이 아닌데'window.innerHeight'는 무엇을보고합니까? –
현재 뷰포트 크기를보고합니다. 즉 460입니다. 'window.document.documentElement.clientHeight'와 같습니다. – Gajus
'availHeight'는 사용할 수있는 화면의 일부이며, 20 줄을 빼면 상태 표시 줄의 높이가 있어야합니다. 문제는 "전체 화면"이 실제로 전체 화면이 아니며 주소 표시 줄이 여전히 누락 된 19 픽셀을 차지하는 것입니다. –