窗口尺寸书签工具

Bookmarklet 是一种特殊的浏览器书签，它的 URL 不是网址而是 javascript: 开头的 JavaScript 代码。点击书签时，浏览器会在当前页面执行这段代码。它是一种轻量级的浏览器扩展替代方案，无需安装任何插件，跨浏览器兼容，常用于页面调试、信息提取、页面改造等场景。本工具生成的 bookmarklet 会在页面上创建一个浮层，实时展示窗口尺寸信息。

视口尺寸（window.innerWidth × innerHeight）是浏览器内容区域的实际大小，包含滚动条但不包含浏览器UI（标签栏、地址栏、书签栏等）。这是网页布局的实际可用空间。

屏幕尺寸（screen.width × screen.height）是用户显示器的物理分辨率，是固定的硬件参数。

窗口外部尺寸（window.outerWidth × outerHeight）包含浏览器UI的完整窗口大小。

在响应式设计中，我们主要关注视口尺寸，因为它决定了CSS媒体查询的断点匹配。

DPR（window.devicePixelRatio）是设备物理像素与CSS像素的比率。例如：
• 普通屏幕：DPR = 1（1个CSS像素 = 1个物理像素）
• Retina/MacBook：DPR = 2（1个CSS像素 = 2×2=4个物理像素）
• 高端手机：DPR = 2.75 或 3

DPR影响图片清晰度（需要@2x/@3x资源）、Canvas绘图精度、以及在高分辨率屏幕上的用户体验。了解DPR有助于优化网页性能和视觉质量。

Bootstrap 5 使用以下断点（以视口宽度 min-width 为准）：
• xs：0px+（默认，无媒体查询）
• sm：≥576px（小型设备，如大屏手机横屏）
• md：≥768px（平板设备）
• lg：≥992px（小型桌面/平板横屏）
• xl：≥1200px（标准桌面）
• xxl：≥1400px（大屏桌面）

本工具的断点指示条直观展示了当前窗口处于哪个断点范围，对响应式开发调试非常实用。

可能的原因：
1. CSP限制：部分网站设置了严格的 Content Security Policy，禁止执行内联脚本（包括bookmarklet）。这是最常见的原因。
2. HTTPS/安全页面：极少数浏览器在特定安全页面上限制 javascript: 协议。
3. 框架页面：在包含 <iframe> 的页面中，书签在顶层窗口执行，浮层会出现在顶层页面。
4. 浏览器扩展冲突：某些安全类扩展可能拦截bookmarklet。

解决方案：尝试在简单页面（如 about:blank 或本地HTML文件）测试，确认书签本身可用。

• Chrome/Edge：右键点击书签栏中的书签 → 选择"删除"。或在书签管理器（Ctrl+Shift+O）中管理。
• Firefox：右键点击书签 → "删除书签"。或在书签库（Ctrl+Shift+B）中管理。
• Safari：右键点击书签 → "删除"。或在书签编辑器中管理。
• 移动端：打开浏览器书签列表，长按书签选择删除。

是的。书签创建的浮层会监听 window.resize 事件，当您调整浏览器窗口大小时，浮层中的所有尺寸数据（视口尺寸、窗口外部尺寸、文档尺寸、滚动位置等）都会实时更新。浮层也支持拖拽移动，方便您将其放置在页面任意位置。关闭浮层后，再次点击书签即可重新打开。

screen.width/height 是显示器的完整分辨率。
screen.availWidth/availHeight 是排除操作系统任务栏、Dock栏等系统UI后的可用区域。

例如，1920×1080的屏幕，如果任务栏高度为40px，则 availHeight = 1040px。这个值对于需要全屏展示的Web应用（如演示文稿、数据大屏）非常有用，可以帮助确定实际可用空间。