使用CSS在Chrome Android上计算视口高度

HTML

<div id="SELEctor"></div>

CSS

#SELEctor {
   height: 100vh;
}

JQUERY

function calcVH() {
    $('#SELEctor').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange',function() {
    calcVH();
  });
})(jQuery);

PURE JS(NO JQUERY)

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight,window.innerHeight || 0);
  document.getElementById("SELEctor").setAttribute("style","height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange',calcVH,truE);

只需将#SELEctor更改为您的css选择器即可.如果使用纯js版本,则需要使用ID,除非将.getElementByID更改为.getElementsByClassName.

我只知道这是移动Chrome Android中的一个问题,但我猜测它也适用于Chrome iOs.如果您愿意,可以轻松添加mobile detect选项,只有在需要时才会运行.我个人使用的Detectizr运行良好,但说实话,因为它非常轻巧,添加这样的东西可能不值得,除非你已经在使用它.

希望这很快得到修复,因此不需要javascript解决方案.此外,我尝试添加resize事件以防浏览器宽度调整大小,但在看到这个问题后,我从我的答案中删除了它.如果你想尝试使用那些只需将上面改为：

JQUERY

function calcVH() {
    $('#SELEctor').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange resize',function() {
    calcVH();
  });
})(jQuery);

$(window).on('resize orientationchange',function() {

PURE JS(NO JQUERY)

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight,truE);
window.addEventListener('resize',truE);