UD5工具箱
视口 Viewport
视口是浏览器中用于显示网页内容的可视区域，它直接决定了用户在不同设备上看到的网页尺寸和布局。在桌面浏览器中，视口通常等于浏览器窗口的内容区域大小（减去滚动条等界面元素）。在移动设备上，视口的概念更加复杂，因为移动设备通常使用较小的物理屏幕来显示为桌面设计的网页。为了应对这个问题，移动浏览器引入了布局视口（Layout Viewport）和视觉视口（Visual Viewport）的概念。布局视口是网页布局的参考尺寸，通常较宽；视觉视口是用户实际看到的区域，可以通过缩放来改变。理解视口的概念是进行响应式网页设计的基础，也是正确使用本工具的前提。
Bookmarklet 书签小工具
Bookmarklet是一种存储在浏览器书签中的JavaScript代码片段，当用户点击书签时会在当前页面中执行相应的JavaScript代码。Bookmarklet的名称来源于Bookmark（书签）和Applet（小程序）的组合。与普通的网页书签不同，Bookmarklet不是导航到某个网址，而是在当前页面上下文中执行自定义功能。Bookmarklet的代码通常经过压缩和编码，存储在书签的URL字段中，以javascript:协议开头。Bookmarklet的优点包括无需安装、跨浏览器兼容、执行速度快、不依赖网络等。常见的Bookmarklet功能包括页面截图、颜色拾取、DOM元素检查、CSS样式调试等。
响应式设计 Responsive Design
响应式设计是一种网页设计方法论，旨在使网页能够自适应不同尺寸和类型的设备屏幕，提供最佳的用户体验。响应式设计的核心理念是使用灵活的布局、弹性的图片和CSS媒体查询来创建能够适应任何设备的网页。响应式设计的三个关键技术是：弹性网格布局（使用百分比而非固定像素值定义布局）、弹性图片和媒体（使用max-width等属性使图片和媒体元素能够自适应容器大小）、CSS媒体查询（根据设备特性应用不同的样式规则）。响应式设计的目标是让一个网站能够在桌面、平板和手机等各种设备上都能良好地显示和使用。
设备像素比 DPR
设备像素比（Device Pixel Ratio，DPR）是设备的物理像素数与逻辑像素数（CSS像素）的比值。例如，一个DPR为2的设备意味着每个CSS像素对应2x2=4个物理像素，这就是常说的Retina显示屏。DPR为3的设备意味着每个CSS像素对应3x3=9个物理像素。DPR对于理解网页在不同设备上的显示清晰度非常重要。在高DPR设备上，使用普通分辨率的图片可能会显示模糊，需要使用2倍或3倍分辨率的图片才能保持清晰。在本工具中，DPR信息会显示在视口信息面板中，帮助开发者了解当前模拟设备的像素密度特性。在进行响应式测试时，了解DPR有助于判断是否需要为高分辨率设备提供额外的图片资源。
断点 Breakpoint
断点是响应式设计中用于触发布局和样式改变的特定屏幕宽度值。在Bootstrap 5框架中，定义了五个标准断点：xs（最小，0像素以上）、sm（小，576像素以上）、md（中等，768像素以上）、lg（大，992像素以上）、xl（特大，1200像素以上）和xxl（超大，1400像素以上）。当视口宽度达到或超过某个断点值时，对应的CSS样式规则就会生效，页面布局会根据新的样式进行调整。选择合适的断点值需要考虑目标用户的设备分布和内容的可读性。本工具内置了6种对应Bootstrap断点的预设尺寸，方便开发者测试框架断点处的布局切换效果。
Retina显示屏
Retina显示屏是Apple公司在2010年推出的一种高分辨率显示技术，其核心特点是像素密度极高，达到了人眼在正常使用距离下无法分辨单个像素的程度。Retina显示屏的DPR通常为2或3，意味着每个CSS像素对应4个或9个物理像素。这一技术后来被广泛应用于各类移动设备和笔记本电脑中。在Retina显示屏上，使用普通分辨率的图片会显得模糊，需要使用高分辨率的图片来充分利用屏幕的像素密度。CSS中的image-rendering属性可以控制图片在高DPR设备上的渲染方式。在响应式设计中，需要为不同DPR的设备提供合适分辨率的图片资源，以确保最佳的显示效果。
布局视口与视觉视口
在移动设备上，视口分为布局视口（Layout Viewport）和视觉视口（Visual Viewport）两个概念。布局视口是浏览器用来计算CSS布局的参考尺寸，通常设置为较宽的值（如980像素），使得为桌面设计的网页不需要特别修改就能在移动设备上显示。视觉视口是用户实际看到的网页区域，它的大小取决于设备的屏幕尺寸和用户的缩放操作。当用户进行缩放操作时，改变的是视觉视口的大小，而布局视口保持不变。理解这两个视口的概念对于正确设置viewport meta标签和编写响应式CSS非常重要。本工具在进行视口尺寸模拟时，主要调整的是布局视口的尺寸。
媒体查询断点策略
媒体查询断点策略是指在响应式设计中如何选择和组织断点值的方法论。常见的断点策略包括：基于设备尺寸的断点策略（根据目标设备的常见屏幕尺寸设置断点）、基于内容的断点策略（根据内容的可读性和布局需要设置断点）、基于框架的断点策略（使用Bootstrap等框架预定义的断点值）。选择合适的断点策略需要综合考虑目标用户群体的设备分布、内容特点和设计规范。本工具提供了基于设备和基于框架两种断点预设分类，帮助开发者快速进行不同策略下的响应式测试。在实际开发中，建议优先使用基于内容的断点策略，因为设备尺寸会不断变化，但内容的可读性需求相对稳定。