iOS 7 iPad Safari Landscape innerHeight / outerHeight 레이아웃 문제
iOS 7의 Safari에서 높이가 100 % 인 웹 앱에 문제가 있습니다. window.innerHeight (672px)가 window.outerHeight (692px)와 일치하지 않는 가로 모드에서만 나타납니다. 결과적으로 신체 높이가 100 % 인 앱에서는 20px의 추가 공간이 생깁니다. 즉, 사용자가 앱에서 위로 스 와이프하면 탐색 요소가 브라우저 크롬 뒤로 처리합니다. 또한 화면 하단에있는 절대 위치 요소는 결국 20px 떨어져 있음을 의미합니다.
이 문제는 다음 질문에 설명했습니다. IOS 7-css-html 높이 -100 % = 692px
이 모호한 스크린 샷에서 볼 수 있습니다. 
우리가 해결하려는 것이 문제를 해킹하여 Apple이 버그를 고칠 때까지 걱정할 필요가 있습니다.
iOS 7에서만 실행하는 한 가지 방법입니다. 그러나 이렇게하면 추가 20px가 페이지 하단이 아닌 상단에 배치됩니다.
body {
position: absolute;
bottom: 0;
height: 672px !important;
}
outerHeight가 innerHeight와 일치하도록 강제하거나 사용자 가이 문제를 볼 수 있습니다 해킹하는 데 도움을 주시면 감사하겠습니다.
제 경우에 해결은 위치를 고정으로 변경하는 것입니다.
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
bottom: 0;
width:100%;
height: 672px !important;
}
}
또한 iOS 7에서 iPad를 감지하는 펼쳐보기를 사용했습니다.
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('html').addClass('ipad ios7');
}
간단하고 깔끔한 CSS 전용 솔루션 :
html {
height: 100%;
position: fixed;
width: 100%;
}
iOS 7은 이것으로 높이를 설정하는 것입니다. 또한 크기 조정 자바 펼쳐 이벤트 등이 필요하지 않습니다. 전체 높이 앱으로 작업하고 있기 때문에 항상 위치가 고정되어 있는지는 중요하지 않습니다.
Terry Thorsen도 언급했듯이 Samuel의 대답은 훌륭하게 작동하지만 웹 페이지가 iOS 홈에 추가 된 경우 실패합니다.
보다 고급 인 수정은 window.navigator.standalonevar 를 확인하는 것 입니다.
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
이렇게하면 Safari 내에서 열었을 때만 적용되고 집에서 실행 한 경우 적용되지 않습니다.
사무엘의 대답은 사용자가 홈 화면에 페이지를 추가로 깨지지 만 최고입니다. 다음과 같이 클래스를 추가하기 전에 innerHeight를 확인하십시오.
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
if(window.innerHeight==672){
$('html').addClass('ipad ios7');
}
}
웹뷰는 웹뷰입니다.
이 문제를 해결하기 위해이 JavaScript 솔루션을 사용했습니다.
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
var fixViewportHeight = function() {
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}.bind(this);
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
Samuel의 접근 방식의 변형이지만 위치 : -webkit-sticky on html이 가장 잘 작동했습니다.
@media (orientation:landscape) {
html.ipad.ios7 {
position: -webkit-sticky;
top: 0;
width: 100%;
height: 672px !important;
}
}
'bottom : 0'이 아닌 'top : 0'이고 대상 요소는 'body'가 아닌 'html'입니다.
기본적으로 두 가지 버그가 있습니다. 가로 모드의 창 높이와 사용자가 세로 모드에서 다시 표시 할 때 스크롤 위치입니다. 우리는 다음과 같이 해결했습니다.
창의 높이는 다음에 의해 제어됩니다.
// window.innerHeight is not supported by IE
var winH = window.innerHeight ? window.innerHeight : $(window).height();
// set the hight of you app
$('#yourAppID').css('height', winH);
// scroll to top
window.scrollTo(0,0);
이제 위의 내용을 함수에 표현 창 크기 조정 및 / 또는 방향 변경 이벤트에 바인딩 할 수 있습니다. 그게 다예요 ... 예를보세요 :
http://www.ajax-zoom.com/examples/example22.php
이 버그를 해결하기 위해 JavaScript가 필요합니다. window.innerHeight올바른 높이가 있습니다. 생각할 수있는 가장 간단한 해결책은 다음과 가능합니다.
$(function() {
function fixHeightOnIOS7() {
var fixedHeight = Math.min(
$(window).height(), // This is smaller on Desktop
window.innerHeight || Infinity // This is smaller on iOS7
);
$('body').height(fixedHeight);
}
$(window).on('resize orientationchange', fixHeightOnIOS7);
fixHeightOnIOS7();
});
을 설정해야 position: fixed합니다 <body>.
다음은 완전한 작동 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>iOS7 height bug fix</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
function fixHeightOnIOS7() {
var fixedHeight = Math.min(
$(window).height(),
window.innerHeight || Infinity
);
$('body').height(fixedHeight);
}
$(window).on('resize orientationchange', fixHeightOnIOS7);
fixHeightOnIOS7();
// Generate content
var contentHTML = $('#content').html();
for (var i = 0; i < 8; i++) contentHTML += contentHTML;
$('#content').html(contentHTML);
});
</script>
<style>
html,
body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
position: fixed;
}
#page-wrapper
{
height: 100%;
position: relative;
background: #aaa;
}
#header,
#footer
{
position: absolute;
width: 100%;
height: 30px;
background-color: #666;
color: #fff;
}
#footer
{
bottom: 0;
}
#content
{
position: absolute;
width: 100%;
top: 30px;
bottom: 30px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="header">Header</div>
<div id="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
받아 들여진 대답과 관련하여 다음 규칙에도 운이 좋았습니다.
html.ipad.ios7 {
position: fixed;
width: 100%;
height: 100%;
}
"아래"에서 스크롤되는 html 요소를 중지하는 것처럼 보인다는 추가 이점이 있습니다.
이것을 사용하는 경우 :
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
Mac의 내 Safari에는 동일한 html 클래스가 표시됩니다. 따라서 제대로 작동하지 않습니다.
몇 가지를 결합 해 보았습니다. 저에게 효과가 있었기 때문에 브라우저보기없이 브라우저에서 관리 할 수 있습니다.
jQuery
if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){
$('html').addClass('ipad ');
if (window.innerHeight != window.outerHeight ){
$('html').addClass('browser landscape');
}
else{
$('html').addClass('browser portrait');
}
}
CSS
@media (orientation:landscape) {
html.ipad.browser > body {
position: fixed;
height: 671px !important;
}
}
///// 이것으로 당신은 더 유연하거나 다른 OS와 브라우저가됩니다
나는 같은 문제 로이 페이지를 보았습니다. 여기에는 유용한 답변이 많이 있으며 (나를 위해) 다른 답변이 있습니다.
그러나 내 경우에는 작동하고 현재 또는 과거 또는 미래의 어떤 OS 버전과 버그와 완전히 독립적으로 작동하는 솔루션을 찾았습니다.
설명 : 클래스 이름이 "module"인 고정 된 크기의 여러 모듈이있는 웹 앱 (기본 앱 없음) 개발
.module {position:absolute; top:0; right:0; bottom:0; left:0;}
클래스 이름이 "footer"인 바닥 글을 포함합니다.
.module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;}
나중에 바닥 글의 높이를 다른 높이로 설정하거나 내용에 따라 높이를 설정 한 경우 다음 코드를 사용하여 수 있습니다.
function res_mod(){
$('.module').css('bottom', 0); // <-- need to be reset before calculation
var h = $('.module > .footer').height();
var w = window.innerHeight;
var o = $('.module > .footer').offset();
var d = Math.floor(( w - o.top - h )*( -1 ));
$('.module').css('bottom',d+'px'); // <--- this makes the correction
}
$(window).on('resize orientationchange', res_mod);
$(document).ready(function(){
res_mod();
});
Matteo Spinelli의 기술 덕분에 많은도 변경 이벤트가 있더라도 iScroll을 문제없이 사용할 수 있습니다. 일치하는 경우 수정 후 iScroll-init를 다시 호출해야합니다.
이것이 누군가에게 도움이되기를 바랍니다.
허용 된 답변은 즐겨 찾기 표시 줄이 표시 될 때 대응하지 않습니다. 다음은 개선 된 모든 수정 사항입니다.
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
height: calc(100vh - 20px);
width:100%;
}
}
시도하면 어떨까요
html{ bottom: 0;padding:0;margin:0}body {
position: absolute;
bottom: 0;
height: 672px !important;
}
'ProgramingTip' 카테고리의 다른 글
| C ++에서 부호있는 정수 오버플로가 여전히 정의되지 않은 동작입니까? (0) | 2020.10.27 |
|---|---|
| 한 단위가 hashCode-equals 계약을 어떻게 테스트해야합니까? (0) | 2020.10.27 |
| 부모 CSS 스타일을 무시하는 방법 (0) | 2020.10.27 |
| MSSQL GetDate ()를 사용할 때 날짜 만 가져 오려면 어떻게해야합니까? (0) | 2020.10.27 |
| Android 웹 페이지에서 입력 확대 / 축소 (0) | 2020.10.27 |