UD5工具箱
安装Bookmarklet到书签栏
首先，确保浏览器的书签栏处于可见状态。如果书签栏未显示，可以通过快捷键Ctrl+Shift+B（Chrome和Edge）或Ctrl+B（Firefox）来切换书签栏的显示状态。然后，在本工具的页面中找到Bookmarklet链接元素，按住鼠标左键不放，将其拖拽到书签栏中。释放鼠标后，Bookmarklet就会被添加到书签栏。您可以在书签栏中看到一个新的书签项，点击它可以为它修改一个更容易识别的名称。至此，Bookmarklet的安装就完成了。整个过程无需安装任何浏览器扩展或插件，非常简单快捷。
在任意网页中激活工具
安装完成后，您可以在任何网页上使用这个Bookmarklet。打开任意一个网页，然后点击书签栏中的Bookmarklet书签。工具会立即在当前页面上激活，弹出一个视口尺寸选择面板。面板中会显示所有预设的设备尺寸，分为手机、平板、桌面和响应式断点四个分类。您可以从这些预设尺寸中选择一个，也可以点击自定义尺寸选项输入任意的宽度和高度值。选择尺寸后，工具会自动调整浏览器窗口的大小到对应的视口尺寸。
选择预设设备尺寸
在尺寸选择面板中，您可以看到四个分类的预设尺寸。手机分类包含了6种常见手机的视口尺寸，从375像素宽的iPhone SE到428像素宽的iPhone Pro Max。平板分类包含了5种平板设备的尺寸，从768像素宽的iPad Mini到834像素宽的iPad Pro 11。桌面分类包含了6种常见的桌面显示器分辨率，从1366x768到3840x2160。响应式断点分类包含了6种对应Bootstrap 5断点的尺寸，方便进行框架相关的响应式测试。每个预设尺寸都标注了设备名称和对应的像素值，帮助您快速选择合适的测试尺寸。
使用iframe预览模式
如果您不想改变浏览器窗口的大小，可以使用iframe预览模式。在尺寸选择面板中点击iframe预览选项，工具会在当前页面中创建一个可调整大小的iframe窗口。在iframe窗口的地址栏中输入您项目的URL，页面就会在模拟的视口尺寸中加载和显示。iframe窗口支持拖拽调整大小，您可以拖拽窗口边缘来手动调整预览区域的尺寸。预览窗口周围会显示精确的尺寸标注，帮助您直观了解当前的预览尺寸。iframe预览模式特别适合在多任务场景中使用，您可以一边编写代码，一边通过iframe预览检查响应式效果。
调整缩放比例
工具提供了缩放控制功能，允许您在不同缩放比例下查看页面效果。在控制面板中，您可以使用缩放滑块或输入框来调整缩放比例，范围从25%到200%。默认情况下，工具会根据当前设备的DPR自动设置合适的缩放比例。缩放功能对于测试高分辨率显示器和Retina屏幕的显示效果非常有用。您可以通过调整缩放比例来模拟不同像素密度设备上的页面表现，确保您的响应式设计在各种设备上都能呈现良好的视觉效果。
保存自定义预设
如果您经常使用某些特定的视口尺寸，可以将它们保存为自定义预设。在自定义尺寸输入框中输入您需要的宽度和高度值，然后点击保存预设按钮。您的自定义预设会被添加到预设列表的顶部，并存储在浏览器的本地存储中。下次使用时，您可以直接从列表中选择保存的预设，无需重新输入。您还可以通过编辑和删除按钮来管理已保存的自定义预设。这个功能对于需要在多个项目中使用相同测试尺寸的开发者来说非常方便。
查看视口信息
工具的界面会实时显示当前视口的各种关键信息。视口宽度和高度以像素为单位显示，帮助您了解当前模拟的设备屏幕大小。设备像素比（DPR）信息对于理解Retina屏幕的显示效果很重要，因为Retina屏幕的DPR通常为2或3，意味着每个CSS像素对应多个物理像素。当前缩放比例以百分比形式显示，帮助您了解当前的缩放状态。设备类型分类会根据当前宽度自动判断显示手机、平板或桌面设备类型，为您的响应式设计决策提供参考。
测试响应式设计的完整流程
完整的响应式测试流程建议按以下步骤进行：首先，从最小的手机尺寸开始测试（如iPhone SE的375像素），检查页面在手机屏幕上的布局是否正确。然后，逐步增大视口宽度，测试从手机到平板的过渡效果，重点关注导航菜单、内容区域和侧边栏在不同宽度下的表现。接着，测试桌面尺寸，确保页面在大屏幕上充分利用了可用空间。最后，使用响应式断点尺寸测试框架断点处的布局切换是否平滑。在整个测试过程中，注意检查图片和视频等媒体元素的响应式表现、字体大小在不同尺寸下的可读性、以及交互元素在触摸设备上的操作便利性。