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.

스크린샷

설치

  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

FAQ

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 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