[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"document:zh-tw:mobile-website-screenshot":3},{"title":4,"description":5,"body":6,"faqs":61,"tool":68,"kind":69,"slug":70,"locale":71},"行動版網頁截圖","使用手機與平板預設擷取公開網頁，檢查窄螢幕下的內容排列。",{"type":7,"value":8,"toc":54},"minimark",[9,13,17,20,23,26,39,42],[10,11,12],"h2",{"id":12},"把網頁整理成實用的畫面",[14,15,16],"p",{},"觀察選單、圖片和內文在小尺寸下如何重排，適合準備行動版設計討論，或查看響應式調整的結果。",[14,18,19],{},"裝置預設會搭配檢視區與瀏覽器裝置模擬設定。圖片是模擬渲染的結果，並非在實體 iPhone 或 Android 裝置上擷取。",[14,21,22],{},"CSS、字型與延遲載入資源可能影響畫面。請核對結果標示的尺寸；觸控操作和平台特有問題仍應使用實體裝置確認。",[10,24,25],{"id":25},"操作方式",[27,28,29,33,36],"ol",{},[30,31,32],"li",{},"貼上公開網址。",[30,34,35],{},"選擇手機或平板預設與擷取範圍。",[30,37,38],{},"產生畫面後檢查版面，再下載。",[10,40,41],{"id":41},"接著完成工作",[14,43,44,49,50],{},[45,46,48],"a",{"href":47},"\u002Fzh-tw\u002Fresponsive-screenshot-checker","一起查看多種寬度"," · ",[45,51,53],{"href":52},"\u002Fzh-tw\u002Fguides\u002Ffull-page-screenshot-safari","Safari 擷取方式",{"title":55,"searchDepth":56,"depth":56,"links":57},"",2,[58,59,60],{"id":12,"depth":56,"text":12},{"id":25,"depth":56,"text":25},{"id":41,"depth":56,"text":41},[62,65],{"question":63,"answer":64},"這是真實 iPhone 的截圖嗎？","不是。這是瀏覽器模擬，實體裝置的顯示與行為可能不同。",{"question":66,"answer":67},"手機畫面為什麼更長？","窄版文字換行較多，多欄版面也可能改成單欄，因此增加頁面高度。","mobile","tool","mobile-website-screenshot","zh-tw",1793599002059]