通过js控制页面某个元素全屏，在电脑上及手机模式下，正常控制全屏

Question

通过js控制页面某个元素全屏，在电脑上及手机模式下，正常控制全屏

但是在手机的QQ、UC、华为自带等浏览器上，点击全屏按钮，该元素在页面上只显示了极小一块区域

右边的全屏按钮，点击后，获取到图表的iframe标签，并通过js设置iframe全屏，且宽高都为100%，在chrome下正常显示为全屏

但是在手机浏览器下，比如QQ和UC等浏览器下，点击全屏后，却显示如下，只有极小的一块区域

全屏代码

/* 进入全屏 */
export function requestFullScreen(element = document.documentElement) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

/* 退出全屏 */
export function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

调用代码

let fullscreen = false
fullScreen.addEventListener('click', function(e) {
    const fullarea = document.getElementById('tv_chart_container')
    const iframe = fullarea.firstElementChild
    if (fullscreen) {// 退出全屏
       iframe.style.height = '250px'
       exitFullscreen(document)
    } else {// 进入全屏
       iframe.style.height = '100%'
       requestFullScreen(fullarea)
    }
    fullscreen = !fullscreen
})

Answer 1

? 任意元素全屏显示, 支持PC/移动端, 不到1kb.

https://github.com/any86/be-full

Answer 2

iframe的父元素高度是多少
可以设置样式为fixed 然后上下左右 0