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

视口尺寸快速切换书签小工具 - 一键调整浏览器大小

10
0
0
0
100%
手机设备
平板设备
桌面分辨率
响应式断点 (Bootstrap 5)
iPhone SE · 375×667 · @2x
当前尺寸：375 × 667 设备：iPhone SE DPR：@2x 缩放：100% 类型：手机 拖我到书签栏
常见问题与知识点

视口是用户在浏览器中看到网页内容的可视区域。在移动端，视口通常比桌面端小得多。前端开发中，理解视口概念对于创建响应式设计至关重要。CSS中的@media查询、vw/vh单位等都基于视口尺寸。使用本工具可以快速模拟不同设备的视口，帮助开发者测试页面在各种屏幕尺寸下的表现。

Bookmarklet是一种存储在浏览器书签中的小型JavaScript程序。使用方法：将本工具生成的"拖我到书签栏"链接直接拖拽到浏览器的书签栏（收藏夹栏）。之后浏览任意网页时，点击该书签即可在新窗口中按指定尺寸打开当前页面。这是测试响应式设计的快捷方式，无需每次都手动调整窗口大小。Chrome、Edge、Firefox等主流浏览器均支持。

许多网站设置了X-Frame-Options或Content-Security-Policy: frame-ancestors HTTP响应头，禁止在其他网站的iframe中嵌入。这是出于安全考虑（防止点击劫持攻击）。如果遇到iframe无法加载的情况，可以使用"在新窗口中打开"按钮，或使用浏览器的开发者工具（F12）中的设备模拟功能进行测试。常见无法嵌入的网站包括Google、Facebook、GitHub等。

Bootstrap 5定义了5个核心断点：XS (<576px)、SM (≥576px)、MD (≥768px)、LG (≥992px)、XL (≥1200px)、XXL (≥1400px)。选择断点时，建议以内容为出发点，而非特定设备。当内容布局开始"破裂"时，就是需要设置断点的位置。同时要覆盖主流设备：手机(320-430px)、平板(768-1024px)、桌面(1280px+)。

设备像素比（Device Pixel Ratio, DPR）是物理像素与CSS逻辑像素之间的比率。例如iPhone 14 Pro Max的逻辑分辨率为430×932，但DPR为3，实际物理像素为1290×2796。高DPR屏幕需要提供@2x或@3x的高清图片资源。CSS中使用window.devicePixelRatio可获取当前设备的DPR值。在响应式设计中，使用srcset和<picture>元素可以根据DPR提供不同分辨率的图片。

在Chrome/Edge中按F12打开开发者工具，点击左上角的设备工具栏切换按钮（手机图标）或按Ctrl+Shift+M即可进入设备模拟模式。在此模式下可以选择预设设备、自定义分辨率、模拟触摸事件、限制网络速度等。本工具提供的iframe预览方式适合快速概览，而开发者工具适合深度调试（可结合CSS修改、控制台等功能）。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 告诉移动浏览器将页面宽度设置为设备宽度，初始缩放比例为1。如果不设置此标签，移动浏览器会默认以980px左右的桌面宽度渲染页面并缩小显示，导致文字过小、布局错乱。这是移动端响应式设计的基础配置，几乎所有现代网页都需要包含此标签。
🔧 相关工具