嵌入式Facebook浏览器在iOS 9.x中错误的视口/页面高度 [英] Wrong viewport/page height in embedded Facebook browser in iOS 9.x

问题描述

当从

在测试了很多不同的假设之后，我们得出结论，这个错误是由浏览器使页面/视口高于可见区域所致。

这个错误似乎与 iOS9 Safari视口问题，meta无法正确缩放？和网页在iOS 8上的Twitter应用中没有达到100％的高度。

解决方案

我们提出的解决方案是在StackOverflow上找到的其他解决方案的组合，同时要注意细节。我会强调，仅仅执行下面的一些修改不会修复bug; 所做的更改必须进行。
$ b

• 定义包装高度的CSS div 元素（＃outer-wrap ）必须从
  

    outer-wrap {
   position：absolute; 
  宽度：100％; 
  身高：100％; 
   overflow：hidden; 
   
    

  至

    html，body，＃outer-wrap {
   position：absolute; 
   top：0; 
  剩下：0; 
   bottom：0; 
   right：0; 
   overflow：hidden; 
   
    




• 以下函数被添加到库中，初始化：
  
  

   函数_fixViewportHeight（）{
   var html = document.querySelector（'html'）; 
   
   function _onResize（event）{
   html.style.height = window.innerHeight +'px'; 
   
   
   window.addEventListener（'resize'，_.debounce（_onResize，125，{
   leading：true，
   maxWait：250，
  尾随：真
  }））; 
   
   _onResize（）; 
  } 
   
   _fixViewportHeight（）; 
    




• viewport 是
  
  

   < meta name =viewport
   content =width =设备宽度，初始缩放比例= 1.0，maximum-scale = 1.0，target-densityDpi = device-dpi> 
    

  然而，比例值必须是 1.0 ， not 1 ;导致修复在我们应用 html-minifier 的构建过程中被中断带整数的十进制值。通过用<！ - htmlmin：ignore - > viewport 元标记来修复html-minifier问题c>评论。

When opening the demo application from core-layout with the embedded browser in the Facebook app on iOS 9.x (at least), the footer element is not visible when the device is in portrait mode. If you rotate the device to landscape mode, the footer will be partially visible. However, the footer (with a button) should be completely visible.

The first image shows how the demo app should look, while the second image shows how the demo app is missing the footer when viewed with the Facebook app's embedded web view (the images were grabbed from a Chrome desktop browser illustrating how the bug is manifested):

After testing a lot of different hypotheses, we concluded that the bug was caused by the browser making the page/viewport higher than the visible area.

This bug seemed related to iOS9 Safari viewport issues, meta not scaling properly? and Web page not getting 100% height in Twitter app on iOS 8.

解决方案

The solution we came up with was a combination of other answers we found on StackOverflow, while paying strong attention to details. I will stress that implementing just some of the below changes did not fix the bug; all the changes had to be made.

• The CSS defining the height of the wrapping div element (#outer-wrap) had to be changed from

  outer-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  

  to

  html, body, #outer-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }
  

• The following function was added to the library, and is called upon initialization:

  function _fixViewportHeight() {
      var html = document.querySelector('html');
  
      function _onResize(event) {
          html.style.height = window.innerHeight + 'px';
      }
  
      window.addEventListener('resize', _.debounce(_onResize, 125, {
          leading: true,
          maxWait: 250,
          trailing: true
      }));
  
      _onResize();
  }
  
  _fixViewportHeight();
  

• The viewport meta tag had to be

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">
  

  However, the scale values had to be 1.0, not 1; that caused the fix to break in one of our build processes where we applied html-minifier, which replaced the decimal values with integer ones. The html-minifier problem was fixed by surrounding the viewport meta tag with <!-- htmlmin:ignore --> comments.

这篇关于嵌入式Facebook浏览器在iOS 9.x中错误的视口/页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！