PhilDesigns Responsive Preview

由 phildesigns 開發

外掛說明

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

After activation, click Responsive Preview in the admin toolbar (top bar).
A new window opens with your site in the preview frame.
Use the SELECT VIEWPORT dropdown to switch device sizes.
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 Responsive Walk bar at the bottom showing the play button and progress scrubber. — The preview interface showing the admin toolbar link, device selector, and an iPhone-sized viewport.

安裝方式

Upload the responsive-preview folder to /wp-content/plugins/
Activate the plugin through the Plugins menu in WordPress
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

將〈PhilDesigns Responsive Preview〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

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

評分

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

撰寫評分

查看全部使用者評論