浏览器视口
在浏览器外框内的 iframe 中调整实际文档尺寸。
响应式预设值
Responsive button
The presets cross the sm breakpoint inside the iframe. The padding readout comes from the real computed style.
参考示例
参考文档示例会使用所需的系统角色与预设令牌，编译各自独立的隔离文档。
设置固定或流动宽度
虚线轮廓是编写时设置的包含块。请对照父元素，查看蓝色边框盒的实际宽度。
使用于 响应式设计指南.
用法与接口
DemoViewport 在 div.ui-browser 内的真实 iframe 中加载网站编写的完整文档（document）或网站 URL（src）。只有视口本身就是教学主体时，才显示浏览器外框：responsive（或 chrome）添加没有地址的窗口圆点栏；托盘标题栏标明文档名称，即时宽度显示在范围输入旁。其他预览均使用 data-variant="plain"，以托盘色调区分没有外框的展示区。responsive 也会添加预设宽度（widthPresets）、ui-range 和 Fit；theme、motion、print 只添加教学需要的控件，inspect 则读取 [data-target] 元素的计算后属性。
<Demo title="Responsive specimen" frame="none" caption="Cross sm inside the iframe."> <DemoViewport title="Responsive specimen" document={html} responsive widthPresets={[{ label: 'Below sm', width: 833 }, { label: 'At sm', width: 835 }]} height={180} /></Demo><div class="ui-browser"> <div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots">…</span></div> <div class="ui-browser-body"><div class="ui-browser-viewport"><iframe …></iframe><span class="ui-resize"></span></div></div> <div class="ui-browser-tools" role="group">… <output class="ui-browser-size">835 px</output> …</div></div>断点宽度应取自当前使用的 preset；上方数值仅演示当前的 sm 边界。预设宽度大于页面时，会在浏览器内容区域内滚动。边缘拖动手柄是指针操作的快捷方式，范围输入仍负责键盘操作。