AI summary
type
status
date
Aug 1, 2024 02:36 AM
slug
summary
tags
category
icon
password

缩放

  • css 控制（zoom vs scale）：在
    CSS 总结     查看
  • 用户行为
    • 双指缩放修改的是 window.visualViewport

Specifications

 
zoom specifications：‣

设置选区（可编辑元素）

选区事件最好在 <input> 和 <textarea> 里设置，因为浏览器内置了选区逻辑和 API，即便你给其他元素设置了 contenteditable ，也会缺少这些 API，比较麻烦
下面以光标选区为例：
  • <input> 和 <textarea> 可以调用 setSelectionRange() 来设置选区
  • 如果是 contenteditable 则没有 setSelectionRange()，需要通过 document.createRange() 和 window.getSelection 来设置
兼容两种情况的实现如下：

浏览器/视窗高宽计算（Screen/Window）

一图胜千言
notion image
需要注意的是：screen.height 和 screen.availHeight 仅跟显示器有关，换言之，你缩放浏览器的高度是不会导致 screen的这两个值变化的（更清晰的说明可以看这篇 blog）
因此，开发常用总结：
  • 浏览器整体高度（带工具栏地址栏等所有 toolbar）：window.outerHeight
  • 浏览器工具栏高度：window.outerHeight - window.innerHeight
  • 网页视窗高度 + 滚动条：window.innerHeight
  • 网页视窗高度：body.clientHeight
  • 网页整体高度（包含视窗外部未显示部分）：body.offsetHeight
  • 底部滚动条：window.innerHeight - body.clientHeight
  • 系统底部任务栏高度：screen.height - screen.avaiHeight
 
另外有一遍文章从 padding 和 border 盒模型的角度解释了innerheight 等 api 的机制
 

引用文章

 
‣ ‣ ‣
 
 
相关文章
CSS 总结
SVG Study
Web 性能优化 - Frame 篇
Algorithm CheatsheetCSS 总结