手机上各种情况下的 innerWidth innerHeight outerWidth outerHeight 数值

Linhieng
45 阅读3分钟

  • 测试手机：

    • 真我GT Neo5 SE（简称真我），ColorOS 13

  • 测试浏览器：

    • 微信自带浏览器，微信版本 红米 8.0.47，真我 8.0.48
    • via 浏览器，均 5.3.0
    • edge 浏览器，红米 118.0.2088.66，真我 120.0.2210.157
    • QQ 浏览器：红米 14.9.0.0035，真我 14.9.0.0041
    • 夸克浏览器，均 5.10.5.520(20240313184609)
    • 百度浏览器，均 13.52.5.10

  • 输入法：讯飞输入法，均 13.0.8(build15101)

    • 键盘高度为默认

  • 视口配置

相关操作（宽度全部都是不会变化的，除非横屏）

无操作：

浏览器innerWidth innerHeightouterWidth outerHeight
微信400 810同左
via355, 664同左
edge355, 656同左
qq400, 725355, 644
夸克355, 701同左
百度355, 680同左

输入内容时弹出键盘（高度全部变小，除了 edge）

浏览器innerWidth innerHeightouterWidth outerHeight
微信400 425同左
via355, 371同左
edge355, 708 变大同左
qq400, 361355, 321
夸克355, 420同左
百度355, 381同左

进入全屏（via 和百度是通过手动进入的全屏，其他是通过脚本进入的全屏）。高度全部变大

浏览器innerWidth innerHeightouterWidth outerHeight
微信400 895同左
via355, 792同左
edge355, 760同左
qq355, 760同左
夸克355, 792同左
百度355, 760同左

进入全屏时，弹出键盘（数值相对全屏时的数值）

浏览器innerWidth innerHeightouterWidth outerHeight
微信400 510 变小同左
via355, 451 变小同左
edge355, 760 不变同左
qq355, 760 不变同左
夸克355, 451 变小同左
百度355, 419 变小同左

设为系统浮窗（高度全部变小）

浏览器innerWidth innerHeightouterWidth outerHeight
微信400, 583同左
via355, 463同左
edge355, 455同左
qq400, 499355, 443
夸克355, 499同左
百度355, 479同左

设置分屏

  • 高度全部都会变化。宽度全部不变。

  • QQ 浏览器还是老样子，inner 和 outer 不相同。

  • 其中微信浏览器在每次变更大小时都会自动刷新！

滚动时

浏览器隐藏内容innerWidth innerHeightouterWidth outerHeight
微信无变化400, 810 不变同左
via无变化355, 664 不变同左
edge下滑时隐藏顶部导航栏和底部工具栏355, 760 变大同左
qq下滑时只隐藏顶部导航栏400, 793 变大355, 443 不变
夸克无变化355, 701 不变同左
百度下滑时只隐藏顶部导航栏355, 718 变大同左

进入全屏使用的工具函数如下：注意该函数对 via 和百度的效果是变成横屏。

function toggleFullScreen() {

  if (!document.fullscreenElement) {

     document.documentElement.requestFullscreen()

  } else {

     if (document.exitFullscreen) { document.exitFullscreen() }

  }

}
avatar
文章
阅读
粉丝