ios7 - css - html高度- 100% = 692px。

[英]IOS 7 - css - html height - 100% = 692px


I have a weird bug on iPad iOS7 landscape mode.

我在iPad iOS7橫屏模式上有一個奇怪的bug。

What i was able to investigate is that in iOS7 window.outerHeight is 692px and window.innerHeight 672px; while in previous versions both values are 672px.

我能調查的是在iOS7窗口。outerHeight是692px和window。innerHeight 672 px;在以前的版本中,兩個值都是672px。

Even though my <html> and <body> tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae

盡管我的和標簽有高度100%的高度,但似乎有滾動的空間,奇怪的是,這個問題只出現在景觀設計上。

You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.

例如,你可以通過訪問t. cinas.com來了解我在說些什么,例如,在iOS 7的iPad中,footer bar(有時是header)會被刪除。但在之前的iOS版本中,內容在全屏顯示很好。

Even when i set the height of both tags to height: 672px !important and position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).

即使我將兩個標簽的高度設置為:672px !重要位置:絕對;底部:0;通過觸摸iframe(廣告是iframe),您仍然可以垂直滾動內容。

I'm running the release candidate version of iOS7

我正在運行iOS7的發布候選版本。

thanks for any help.

感謝任何幫助。

4 个解决方案

#1


15  

I believe this is a bug in iOS 7 - if you rotate it to portrait mode, it sets both (innerHeight/outerHeight) to the same value. If it isn't a bug, then portrait mode has one because the behavior isn't consistent.

我相信這是ios7中的一個錯誤——如果你將它旋轉到豎屏模式,它會將兩個(innerHeight/outerHeight)設置為相同的值。如果它不是一個bug,那么豎屏模式有一個,因為它的行為是不一致的。

You could detect iOS 7/mobile Safari and use window.innerHeight if iOS 7.

你可以檢測iOS 7/mobile Safari和use window。innerHeight如果iOS 7。

#2


15  

I used this JavaScript solution for solving that problem:

我使用這個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);
        }
    };

    window.addEventListener("scroll", fixViewportHeight, false);
    window.addEventListener("orientationchange", fixViewportHeight, false);
    fixViewportHeight();

    document.body.style.webkitTransform = "translate3d(0,0,0)";
}

#3


7  

I'll combine the answers. Thanks all!

我把答案。感謝所有!

You can do something like this:

你可以這樣做:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('#yourDivID').height(window.innerHeight);
    window.scrollTo(0, 0);
}

The window.scrollTo solves the issue of the bar overlapping in landscape when rotating.

窗外。當旋轉時,滾動條解決了橫條在景觀中重疊的問題。

Cheers!

干杯!

#4


1  

I reproduce the same problem in iOS 8.

我在ios8中復制了相同的問題。

Here is my solution.

這是我的解決方案。

I listened resize, scroll, orientationChange event, to ensure when user trigger screen size change, will call reset height function.

我聽大小調整,滾動,定向變化事件,以確保當用戶觸發屏幕尺寸變化時,將調用reset height函數。

I wrote a debounce to prevent multiple call.

我寫了一篇文章以避免多次通話。

And It's in a closure and no dependent (no jQuery).

它是一個閉包,沒有依賴(沒有jQuery)。

(function(){
  var setViewportHeight = (function(){
    function debounced(){
      document.documentElement.style.height = window.innerHeight + "px";
      if (document.body.scrollTop !== 0) {
          window.scrollTo(0, 0);
      }
    }
    var cancelable = null;

    return function(){
      cancelable && clearTimeout(cancelable);
      cancelable = setTimeout(debounced, 100);
    };
  })();

  //ipad safari
  if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){  
    window.addEventListener("resize", setViewportHeight, false);
    window.addEventListener("scroll", setViewportHeight, false);
    window.addEventListener("orientationchange", setViewportHeight, false);
    setViewportHeight();
  }
})();

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/09/17/72108b39f0801636d80778fd0e09ee7e.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com