Title: PhilDesigns Responsive Preview
Author: phildesigns
Published: <strong>2026 年 8 月 17 日</strong>
Last modified: 2026 年 8 月 17 日

---

搜尋外掛

![](https://ps.w.org/phildesigns-responsive-preview/assets/banner-772x250.png?rev
=3651233)

![](https://ps.w.org/phildesigns-responsive-preview/assets/icon-256x256.png?rev=
3651233)

# PhilDesigns Responsive Preview

 由 [phildesigns](https://profiles.wordpress.org/pdidee/) 開發

[下載](https://downloads.wordpress.org/plugin/phildesigns-responsive-preview.3.1.1.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/phildesigns-responsive-preview/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/phildesigns-responsive-preview/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/phildesigns-responsive-preview/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/phildesigns-responsive-preview/#developers)

 [技術支援](https://wordpress.org/support/plugin/phildesigns-responsive-preview/)

## 外掛說明

Responsive Preview adds a link to the WordPress admin toolbar that opens your site
inside a full-screen preview interface. Switch between device viewport sizes and
use the Responsive Walk feature to animate a smooth sweep from 1440px down to 320px.

#### Features

 * **Device Viewports** — desktop, laptops, iPad, iPhones, Pixel, and more; toggle
   portrait/landscape on rotatable devices
 * **Custom Devices** — define your own device presets with a name, width, and height;
   manage them from the settings page
 * **Responsive Walk** — play/pause animation that sweeps the iframe from 1440px
   to 320px over 10 seconds, with a scrubbable progress bar
 * **Settings page** — enable or disable any viewport from the device dropdown

#### Usage

 1. After activation, click **Responsive Preview** in the admin toolbar (top bar).
 2. A new window opens with your site in the preview frame.
 3. Use the **SELECT VIEWPORT** dropdown to switch device sizes.
 4. Click the orange play button at the bottom to start a Responsive Walk.

## 螢幕擷圖

[⌊The preview interface showing the admin toolbar link, device selector, and an 
iPhone-sized viewport.⌉⌊The preview interface showing the admin toolbar link, device
selector, and an iPhone-sized viewport.⌉[

The preview interface showing the admin toolbar link, device selector, and an iPhone-
sized viewport.

[⌊The Responsive Walk bar at the bottom showing the play button and progress scrubber.⌉⌊
The Responsive Walk bar at the bottom showing the play button and progress scrubber
.⌉[

The Responsive Walk bar at the bottom showing the play button and progress scrubber.

[⌊The settings page with viewport toggles and the custom devices table.⌉⌊The settings
page with viewport toggles and the custom devices table.⌉[

The settings page with viewport toggles and the custom devices table.

[[

## 安裝方式

 1. Upload the `responsive-preview` folder to `/wp-content/plugins/`
 2. Activate the plugin through the **Plugins** menu in WordPress
 3. Click **Responsive Preview** in the admin toolbar to open the preview

## 常見問題集

### Can I add my own device sizes?

Yes. Go to **Settings  Responsive Preview**, scroll to the Custom Devices section,
and add as many devices as you like.

### Why can’t I remove the Desktop viewport?

The Desktop option (100% width) is always enabled so there is always at least one
viewport available.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈PhilDesigns Responsive Preview〉的開發相關工作。

參與者

 *   [ phildesigns ](https://profiles.wordpress.org/pdidee/)

[將〈PhilDesigns Responsive Preview〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/phildesigns-responsive-preview)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/phildesigns-responsive-preview/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/phildesigns-responsive-preview/)，
或透過 [RSS](https://plugins.trac.wordpress.org/log/phildesigns-responsive-preview/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/phildesigns-responsive-preview/)。

## 變更記錄

#### 3.1.1

 * Renamed all remaining `rp_` function, option, and settings-API identifiers to
   the `philrepr_` prefix (the shorter prefix was flagged as too short by the plugin
   review)

#### 3.1.0

 * Added Responsive Walk — animated iframe width sweep from 1440px to 320px with
   scrubbable progress bar

#### 3.0.0

 * Switched preview bar to flexbox layout
 * Moved orientation toggle out of select box
 * Added Settings link on Plugins page
 * Added support for enabling/disabling viewports and custom device management
 * Updated colours, fonts, and styles

#### 2.0.0

 * Added viewport dropdown with popular device sizes
 * Added FontAwesome icons

#### 1.0.0

 * Initial release

## 中繼資料

 *  版本 **3.1.1**
 *  最後更新 **3 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 6.7 或更新版本 **
 *  已測試相容的 WordPress 版本 **7.0.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/phildesigns-responsive-preview/)
 * 標籤:
 * [mobile](https://tw.wordpress.org/plugins/tags/mobile/)[preview](https://tw.wordpress.org/plugins/tags/preview/)
   [responsive](https://tw.wordpress.org/plugins/tags/responsive/)[testing](https://tw.wordpress.org/plugins/tags/testing/)
   [viewport](https://tw.wordpress.org/plugins/tags/viewport/)
 *  [進階檢視](https://tw.wordpress.org/plugins/phildesigns-responsive-preview/advanced/)

## 評分

這個項目尚無任何評論記錄。

[撰寫評分](https://wordpress.org/support/plugin/phildesigns-responsive-preview/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/phildesigns-responsive-preview/reviews/)

## 參與者

 *   [ phildesigns ](https://profiles.wordpress.org/pdidee/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/phildesigns-responsive-preview/)