SunJianXu Blog SunJianXu Blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《JavaScript DOM 编程艺术》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《Git》学习笔记
    • 《TypeScript》学习笔记
  • HTML
  • CSS
后端
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

SunJianXu

前端界的小学生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《JavaScript DOM 编程艺术》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《Git》学习笔记
    • 《TypeScript》学习笔记
  • HTML
  • CSS
后端
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • JavaScript

    • 数组扁平化
    • 获取页面视口大小
    • 解决 ios10 及以上 Safari 无法禁止缩放的问题
  • 学习笔记

  • 前端
  • JavaScript
sunjianxu
2021-08-21

获取页面视口大小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      var size = getViewPortSize()
      console.log(size)
      function getViewPortSize() {
        var pageWidth = window.innerWidth,
          pageHeight = window.innerHeight
        if (typeof pageWidth != 'number') {
          if (document.compatMode == 'CSS1Compat') {
            //  是在标准模式下
            pageWidth = document.documentElement.clientWidth
            pageHeight = document.documentElement.clientHeight
          } else {
            //  混杂模式下
            pageWidth = document.body.clientWidth
            pageHeight = document.body.clientHeight
          }
        }
        return {
          pageWidth,
          pageHeight,
        }
      }
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
编辑 (opens new window)
上次更新: 2021/08/21 17:31:26
数组扁平化
解决 ios10 及以上 Safari 无法禁止缩放的问题

← 数组扁平化 解决 ios10 及以上 Safari 无法禁止缩放的问题→

最近更新
01
解决 ios10 及以上 Safari 无法禁止缩放的问题
08-31
02
数组扁平化
08-20
03
TypeScript笔记
10-08
更多文章>
Theme by Vdoing | Copyright © 2019-2021 SunJianXu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×