path: root/files/zh-tw/tools/responsive_design_mode/index.html

---
title: 適應性設計模式
slug: Tools/Responsive_Design_Mode
translation_of: Tools/Responsive_Design_Mode
---
<div class="note">
<p>本頁在講述 Firefox 52 及其後的適應性設計模式。要找之前的版本，請參閱<a href="/zh-TW/docs/Tools/Responsive_Design_Mode_(before_Firefox_52)">適應性設計模式（Firefox 52 之前）</a>。這個版本的適應性設計模式還要啟動 Firefox <a href="https://support.mozilla.org/t5/Manage-preferences-and-add-ons/Enable-multiprocess-support/ta-p/1371917">multi-process support (e10s)</a>。如果沒有啟動的話，你還是會看到舊版的適應性設計模式。</p>
</div>

<p><a href="/zh-TW/Apps/Progressive/Responsive">適應性設計</a>（響應式設計）是指能令大多數不同設備，能有著相似效果的網站設計實做。特別是指手機平板，也能有如同桌機筆電般的效果。</p>

<p>在此，最重要的影響因素是螢幕寬度。但也有其他諸如像素的密度、有沒有支援觸控之類的因素。適應性設計模式提供了這些因素的簡單模擬法、以觀察網站在不同的設備下，會是什麼樣子。</p>

<h2 id="切換適應性設計模式">切換適應性設計模式</h2>

<p>有三種方法能切換到適應性設計模式：</p>

<ul>
 <li>透過 Firefox 選單：從網頁開發者工具的選單選取「適應性設計模式」（如果是 OS X 則是 Tools menu）。</li>
 <li>透過網頁開發者工具：在<a href="/zh-TW/docs/Tools_Toolbox#Toolbar" title="/zh-TW/docs/Tools_Toolbox#Toolbar">開發者工具的工具欄</a>點選「適應性設計模式」的按鈕： <img alt="" src="https://mdn.mozillademos.org/files/14339/rdm-button.png" style="display: block; height: 746px; margin-left: auto; margin-right: auto; width: 948px;"></li>
 <li>透過鍵盤：按下 Ctrl + Shift + M（在 OS X 是 Cmd + Opt + M）。</li>
</ul>

<h2 id="使用適應性設計模式">使用適應性設計模式</h2>

<p>啟動適應性設計模式後，網頁的內容會縮成特定設備的尺寸。初始是 320 x 480 像素：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14365/rdm-open.png" style="display: block; height: 1928px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<p>你可以獨立切換顯示開發者工具的位置：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14367/rdm-toolbox.png" style="display: block; height: 1928px; margin-left: auto; margin-right: auto; width: 948px;"> 當適應性設計模式啟動時，你可以在大小調整後的區域內，如同平常一般地瀏覽。</p>

<h2 id="設備選擇">設備選擇</h2>

<p>在視區上方你會看到「尚未選擇裝置」：點選此欄就能看到裝置清單。選一個裝置，適應性設計模式就會設定以模擬該裝置的這些屬性：</p>

<ul>
 <li>螢幕大小</li>
 <li>設備像素比例（設備物理的像素對上獨立於設備的像素之比例）</li>
 <li>觸控事件</li>
</ul>

<p>另外，Firefox 還會設定<a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent">用戶代理</a>的 HTTP 請求標頭，以標定自己為該裝置的預設瀏覽器。例如說，當你選了 iPhone，Firefox 就會把自己標為 Safari。<code><a href="/zh-TW/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> 屬性也會成為該值。</p>

<p>{{EmbedYouTube("JNAyKemudv0")}}</p>

<p>選單所列出的裝置，只是選定裝置的子集。在該選單的底下有個「編輯清單…」的選項。選定以後就會看到所有選項，還能點選想要在選單出現的設備選項。設置的相關聯裝備與數值，是取自於 <a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a>。</p>

<h3 id="儲存自訂設備">儲存自訂設備</h3>

<p>54 版以後的 Firefox 允許你自訂設備。各設備都會有：</p>

<ul>
 <li>大小</li>
 <li>設備像素比例</li>
 <li>用戶代理</li>
 <li>是否支援觸碰</li>
</ul>

<p>另外，你還能透過把滑鼠停在設備名，以瀏覽該設備的屬性資訊。他們會<span class="sentence" id="mt1">以快顯視窗</span>的形式出現。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p>

<h2 id="裝置控制">裝置控制</h2>

<p>你也能給多數設備支援自訂屬性。</p>

<h3 id="設定螢幕大小">設定螢幕大小</h3>

<p>要設定螢幕大小，請點擊視窗下面的數值並修改之：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14355/rdm-set-size.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<p>你也可以點右下角的三角形後不放，以自行調整你需要的大小。</p>

<h3 id="設定設備像素比例">設定設備像素比例</h3>

<p>要自訂備像素比例，請點擊「DPR」標籤並選定想要的值。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14353/rdm-set-dpr.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h3 id="模擬觸控事件切換">模擬觸控事件切換</h3>

<p>要啟動或關閉觸控事件，請點選手指圖示的圖標：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14359/rdm-toggle-touch.png" style="display: block; height: 1704px; margin-left: auto; margin-right: auto; width: 948px;">在觸控事件啟動時，滑鼠事件會被轉為<a href="/zh-TW/docs/Web/Guide/API/DOM/Events/Touch_events">觸控事件</a>。</p>

<p>開啟觸控事件會強制頁面重啟，因為許多頁面會在載入的時候檢查觸控，若支持觸控事件的話，也將增加 event handler。</p>

<h3 id="切換方向">切換方向</h3>

<p>要讓螢幕在直放與橫放間切換，請點選設備選擇器旁邊的圖標：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14357/rdm-toggle-orientation.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h2 id="網路限速">網路限速</h2>

<p>若你只在網速很快的環境下測試，你網站可能會在網速慢的環境下碰上問題。在適應性設計模式裡面，你可以叫瀏覽器用大略的速度，模擬不同的上網方案。</p>

<p>這些方案會模擬：</p>

<ul>
 <li>下載速度</li>
 <li>上載速度</li>
 <li>最小延遲</li>
</ul>

<p>下方表格列出了各網路方案的大略數值，但請不要用這個功能做精確的性能測量：此功能目的，是給出不同條件下的用戶體驗。</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">選取</th>
   <th scope="col">下載速度</th>
   <th scope="col">上載速度</th>
   <th scope="col">最小延遲（毫秒）</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>GPRS</td>
   <td>50 KB/s</td>
   <td>20 KB/s</td>
   <td>500</td>
  </tr>
  <tr>
   <td>Regular 2G</td>
   <td>250 KB/s</td>
   <td>50 KB/s</td>
   <td>300</td>
  </tr>
  <tr>
   <td>Good 2G</td>
   <td>450 KB/s</td>
   <td>150 KB/s</td>
   <td>150</td>
  </tr>
  <tr>
   <td>Regular 3G</td>
   <td>750 KB/s</td>
   <td>250 KB/s</td>
   <td>100</td>
  </tr>
  <tr>
   <td>Good 3G</td>
   <td>1.5 MB/s</td>
   <td>750 KB/s</td>
   <td>40</td>
  </tr>
  <tr>
   <td>Regular 4G/LTE</td>
   <td>4 MB/s</td>
   <td>3 MB/s</td>
   <td>20</td>
  </tr>
  <tr>
   <td>DSL</td>
   <td>2 MB/s</td>
   <td>1 MB/s</td>
   <td>5</td>
  </tr>
  <tr>
   <td>Wi-Fi</td>
   <td>30 MB/s</td>
   <td>15 MB/s</td>
   <td>2</td>
  </tr>
 </tbody>
</table>

<p>要選擇網路的話，請點選標示著「不限速」的標籤：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14361/rdm-network.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h2 id="擷圖">擷圖</h2>

<p>要擷取視口的螢幕畫面，請點擊相機圖示：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14363/rdm-screenshot.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<p>畫面會放在 Firefox 預設的下載目錄。</p>

<p>Firefox 53 以後，若你在<a href="/zh-TW/docs/Tools/Settings">設定頁面</a>點選「將畫面擷圖拍到剪貼簿」，螢幕擷圖就會複製到作業系統的剪貼簿。</p>