Question

我的webapp目前有以下视口：

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

使用height = device-height的问题在于它考虑了整个屏幕的高度。我需要设备高度减去浏览器GUI。目前，该页面的长度约为40-50px。我不想硬编码css以减去该数量，因为GUI可以根据浏览器，可访问性设置等进行更改......任何人都有解决方案吗？

Answer 1

使用了我在线程中找到的答案的组合

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
       var fixViewportHeight = function () {
           document.documentElement.style.height = inner + "px";
           if ($("input,textarea,select").is(":focus")) {
                 $('body').css('position', 'static');
           }
           else {
              $('body').css('position', 'fixed');
           }
       };
       window.addEventListener("scroll", fixViewportHeight, false);
       window.addEventListener("orientationchange", fixViewportHeight, false);
       fixViewportHeight();
       document.body.style.webkitTransform = "translate3d(0,0,0)";
    }

Answer 2

正确，视口是您的完整设备，包括GUI。

最简单的解决方案;只是不设置高度！使用height: 100%上的浏览器html, body获取所需的绝对高度。

iOS设备高度视口太长

2 个答案: