UD5工具箱
24种预设设备尺寸全面覆盖
本工具精心挑选了24种预设设备尺寸，全面覆盖当前主流的终端设备类型。手机尺寸包含6种常见配置：iPhone SE（375x667）、iPhone 12/13（390x844）、iPhone 12/13 Pro Max（428x926）、Samsung Galaxy S21（360x800）、Google Pixel 6（412x915）和iPhone 14 Pro（393x852）。平板尺寸包含5种配置：iPad Mini（768x1024）、iPad（810x1080）、iPad Air（820x1180）、iPad Pro 11（834x1194）和Samsung Galaxy Tab S7（800x1280）。桌面尺寸包含6种常见分辨率：1366x768（小笔记本）、1440x900（标准笔记本）、1536x864（高分笔记本）、1920x1080（全高清）、2560x1440（2K显示器）和3840x2160（4K显示器）。响应式断点尺寸包含6种对应Bootstrap 5断点的配置：xs（576）、sm（768）、md（992）、lg（1200）、xl（1280）和xxl（1400）。
拖拽Bookmarklet到书签栏
工具提供了简洁的Bookmarklet安装方式。用户只需将页面上的Bookmarklet链接拖拽到浏览器的书签栏中，即可完成安装。安装完成后，用户可以在任何网页上通过点击书签栏中的Bookmarklet来激活工具。Bookmarklet的设计考虑了跨浏览器兼容性，支持Chrome、Firefox、Edge、Safari等主流浏览器。书签栏中显示的名称简洁明了，方便用户快速识别。由于Bookmarklet是纯JavaScript实现，不需要任何网络请求，因此激活速度极快，不会对当前页面的加载性能产生任何影响。
iframe预览与窗口调整
iframe预览模式是本工具的核心功能之一。激活后，工具会在当前页面中创建一个居中的iframe窗口，窗口的尺寸对应所选的设备视口大小。iframe窗口可以加载任意目标URL，开发者可以输入自己项目的地址进行实时预览。iframe窗口还支持拖拽调整大小，开发者可以通过拖拽窗口边缘来手动调整预览区域的尺寸，以测试自定义尺寸下的页面表现。预览窗口周围会显示精确的尺寸标注，帮助开发者直观地了解当前预览区域的实际大小。预览窗口还支持全屏模式和关闭操作，提供灵活的预览控制。
缩放控制与DPR模拟
缩放控制功能允许开发者调整预览区域的缩放比例，从25%到200%之间自由选择。工具会自动检测当前设备的像素比（DPR），并在显示信息中呈现。开发者可以通过缩放功能模拟不同DPR设备的显示效果，这对于测试Retina屏幕和高分辨率显示器的页面表现非常重要。缩放比例的调整会实时反映到预览区域中，开发者可以即时查看缩放后的页面效果。缩放功能还支持快捷键操作，开发者可以通过键盘快捷键快速调整缩放比例，提升操作效率。
自定义宽度高度输入
除了预设尺寸外，工具还允许开发者自定义输入任意的宽度和高度值。自定义尺寸功能通过两个输入框实现，开发者可以自由输入所需的像素值。输入值会实时验证，确保在合理范围内。自定义尺寸特别适合测试非标准设备尺寸的响应式效果，或者在特定的设计规范下进行精确的尺寸调试。自定义尺寸还可以保存为预设，方便后续重复使用。保存的自定义预设会存储在浏览器的本地存储中，不会因关闭浏览器而丢失。
保存为自定义预设
开发者可以将常用的自定义尺寸保存为预设，方便后续快速调用。保存的预设会显示在预设列表的顶部，并支持编辑和删除操作。预设数据存储在浏览器的localStorage中，不会发送到任何服务器，确保用户的隐私安全。当开发者需要在多个项目中使用相同的测试尺寸时，保存预设功能可以避免每次都手动输入尺寸值的麻烦。预设列表还支持排序功能，开发者可以根据使用频率或尺寸大小进行排序，方便快速找到需要的预设。
当前尺寸与设备类型显示
工具的界面顶部会实时显示当前视口的各种关键信息。视口宽度和高度以像素为单位显示，精确到1像素。设备像素比（DPR）显示当前设备的像素密度，对于理解高分辨率显示效果至关重要。当前缩放比例以百分比形式显示，帮助开发者了解当前的缩放状态。设备类型分类会根据当前宽度自动判断并显示手机、平板或桌面设备类型，为响应式设计决策提供直观参考。所有信息都会随着视口尺寸的变化实时更新，确保开发者始终掌握最新的视口状态。