无需登录 数据私有 本地保存

响应式视图小书签 - 一键切换常见设备尺寸

开发工具 测试 书签 切换 响应式 视口
40
0
0
0

响应式视图小书签

一键切换常见设备尺寸，快速预览网页响应式效果 · 拖拽安装 · 即点即用

iPhone SE';d.body.insertBefore(bar,d.body.firstChild);window.bmSetSize=function(w,h,n){var btns=bar.querySelectorAll('button');btns.forEach(function(b){b.classList.remove('bm-active');});if(w===0){d.body.style.maxWidth='';d.body.style.margin='';d.body.style.boxShadow='';d.body.style.transition='';d.body.style.overflow='';var wr=d.getElementById('bm-resp-wrapper');if(wr){var pr=wr.parentNode;while(wr.firstChild)pr.insertBefore(wr.firstChild,wr);pr.removeChild(wr);}if(event&&event.target)event.target.classList.add('bm-active');return;}if(event&&event.target)event.target.classList.add('bm-active');var existWr=d.getElementById('bm-resp-wrapper');if(existWr){var ep=existWr.parentNode;while(existWr.firstChild)ep.insertBefore(existWr.firstChild,existWr);ep.removeChild(existWr);}d.body.style.maxWidth=w+'px';d.body.style.margin='20px auto';d.body.style.boxShadow='0 0 0 1px #e2e8f0, 0 8px 40px rgba(0,0,0,0.12)';d.body.style.transition='all 0.3s ease';d.body.style.overflow='auto';d.body.style.borderRadius='8px';window.scrollTo(0,0);};window.bmClose=function(){d.getElementById('bm-resp-bar').remove();d.body.style.maxWidth='';d.body.style.margin='';d.body.style.boxShadow='';d.body.style.transition='';d.body.style.overflow='';d.body.style.borderRadius='';var wr2=d.getElementById('bm-resp-wrapper');if(wr2){var p2=wr2.parentNode;while(wr2.firstChild)p2.insertBefore(wr2.firstChild,wr2);p2.removeChild(wr2);}};})();" class="rpv-bookmarklet-btn" title="拖拽到书签栏即可使用" draggable="true" id="rpv-bookmarklet-link"> 📱 响应式预览 拖我到书签栏 拖拽上方按钮到浏览器书签栏
实时预览
缩放: 100%
当前: iPhone SE · 375 × 667
控制面板
×

如何使用书签？

1. 确保浏览器书签栏可见（Ctrl+Shift+B）
2. 将上方蓝色按钮拖拽到书签栏
3. 打开任意网页，点击书签即可启动预览工具栏
4. 选择设备尺寸，页面即自动调整

预设设备尺寸一览
设备 类型 宽度 (px) 高度 (px) 分辨率 操作
常见问题与知识点
什么是响应式视图小书签（Bookmarklet）？
响应式视图小书签是一段轻量级的JavaScript代码，以书签的形式保存在浏览器中。点击书签后，它会在当前页面上注入一个浮动的设备预览工具栏，让你可以一键将页面宽度调整为常见设备的尺寸（如iPhone、iPad、桌面分辨率等），从而快速检查网页的响应式布局效果。无需安装任何浏览器扩展，不占用系统资源，跨浏览器通用。
如何安装和使用这个小书签？
安装步骤：
1. 确保浏览器书签栏可见（Chrome/Edge按 Ctrl+Shift+B，Safari按 Cmd+Shift+B）
2. 将页面上的蓝色"📱 响应式预览"按钮直接拖拽到书签栏
3. 或者点击"复制代码"按钮，手动创建书签并粘贴代码

使用方法：打开任意网页，点击书签栏中的"响应式预览"书签，页面顶部会出现设备选择工具栏，点击设备名称即可切换预览尺寸，点击"重置"恢复原始布局。
为什么iframe预览某些网站时显示空白？
这是由于目标网站设置了 X-Frame-Options 或 Content-Security-Policy 响应头，禁止其页面被嵌入到iframe中。这是网站的安全策略，无法从前端绕过。

解决方案：使用书签方式——将书签安装到浏览器后，直接在你想要预览的网页上点击书签，这样就不会受到iframe限制，因为书签是直接在目标页面上运行的。
书签预览和浏览器开发者工具的设备模拟有何区别？
浏览器开发者工具（F12）的设备模拟功能更强大，它可以模拟触摸事件、修改User-Agent、限制网络速度等。而小书签的优势在于：

• 快速轻量：一键切换，无需打开开发者工具
• 真实渲染：在真实浏览器环境中查看，而非模拟器
• 演示方便：向客户或团队成员展示响应式效果时更加直观
• 跨浏览器：在任何浏览器中都能使用，不依赖特定开发者工具
支持哪些设备尺寸的预设？
目前预设覆盖三大类主流设备：

📱 手机：iPhone SE (375×667)、iPhone 12/13 (390×844)、iPhone 14 Pro Max (430×932)、Google Pixel 5 (393×851)、Samsung Galaxy S22 (360×780)
📋 平板：iPad Mini (768×1024)、iPad (810×1080)、iPad Pro 11" (834×1194)、iPad Pro 12.9" (1024×1366)
🖥 桌面：1280×720 (HD)、1366×768 (笔记本)、1440×900、1920×1080 (Full HD)、2560×1440 (2K)

同时也支持自定义尺寸，输入任意宽高即可预览。
书签代码安全吗？会收集我的数据吗？
完全安全。书签代码是纯前端JavaScript，仅在您当前浏览的页面上运行，用于修改页面布局样式（如max-width、margin等）。它不会：

• 收集任何个人信息或浏览数据
• 向任何服务器发送请求
• 修改页面内容或DOM结构
• 在页面间持久化任何数据

代码逻辑完全透明，您可以查看书签中的JavaScript源码（解码后），仅包含设备尺寸切换和样式调整的功能。
什么是响应式网页设计（RWD）？为什么需要多设备预览？
响应式网页设计（Responsive Web Design，RWD）是一种网页设计方法，使网站能够根据用户设备屏幕的大小、分辨率和方向自动调整布局。核心原则包括：

• 流体网格：使用相对单位（%、vw、rem）而非固定像素
• 弹性图片：图片随容器缩放，使用max-width:100%
• 媒体查询：根据屏幕宽度应用不同的CSS样式

多设备预览工具帮助开发者和设计师快速验证网站在不同设备上的显示效果，确保用户体验的一致性。随着移动设备种类日益增多（折叠屏、大屏手机等），响应式测试变得愈发重要。
小书签在移动端浏览器上能用吗？
移动端浏览器的书签功能支持有限。在iOS Safari和Android Chrome中，虽然可以保存书签，但通过点击书签执行JavaScript的方式不如桌面端方便。

移动端替代方案：
• 使用本工具页面的iframe预览功能，在移动端也能切换设备尺寸查看效果
• 使用浏览器开发者工具的远程调试功能（USB连接电脑）
• 在桌面端使用书签是最佳体验，移动端建议直接使用本工具页面
✅ 书签代码已复制！请手动创建书签并粘贴
🔧 相关工具