瀏覽器視窗
在瀏覽器外框內的 iframe 中調整實際文件尺寸。
響應式預設值
Responsive button
The presets cross the sm breakpoint inside the iframe. The padding readout comes from the real computed style.
參考示範
參考文件示範會使用所需的系統角色與預設樣式集 token，編譯各自獨立的隔離文件。
設定固定或流動寬度
虛線外框是撰寫時設定的包含區塊。請對照父元素，查看藍色 border-box 的實際寬度。
使用於 響應式設計指南.
用法與介面
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 邊界。預設寬度大於頁面時，會在瀏覽器內容區內捲動。邊緣拖曳把手是指標操作的捷徑，範圍輸入仍負責鍵盤操作。