jQuery Plugin To Test Your Website In Multiple Types of Screen

MultiSizeScreen is a jQuery based responsive design testing tool to test how your website works at different screen resolutions including desktop, tablet (iPad), mobile devices (iPhone) or custom screen sizes.

How to use it:

1. Include jQuery library and the jQuery MultiSizeScreen plugin's JS & CSS in the document.

<link rel="stylesheet" href="responsive_screen.css">

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="responsive_screen.js"></script>

2. Wrap your website's url into an iframe element.

<article id="iframe">
  <iframe id="screen" src="http://www.google.com"></iframe>
</article>

3. Create switch buttons for different screen resolutions.

<button id="big-screen">Desktop</button>
<button id="medium-screen">iPad</button>
<button id="small-screen">iPhone</button>
<button id="custom-screen">Custom</button>

4. Enable the responsive design testing tool.

(function () {
  $(function(){
    var frame = $('#frame'),
      big = $('#big-screen').multiSizeScreen(frame, {
        size: "desktop"
      }),
      medium = $('#medium-screen').multiSizeScreen(frame, {
        size: "iPad"
      }),
      small = $('#small-screen').multiSizeScreen(frame, {
        size: "iPhone"
      }),
      custom = $('#custom-screen').multiSizeScreen(frame, {
        size: "custom",
        "width": "360px",
        "height": "640px",
        "padding": "35px 0"
      })
  });
})();

5. Global settings.

// Presets for multiple screen sizes.
// iPhone, iPad, Desktop or Custom
size: "iPhone",

// The transition speed between various sizes.
speed: "slow"

Change log:

2015-03-15

• remove unnecessary logging
• Enabled data-only-attribute to trigger changing of screensize: data-screen-size="custom" data-screen-option='{"width": "360px", "height": "640px", "padding": "45px 0"}'

---

This awesome jQuery plugin is developed by pandawarrior91. For more Advanced Usages, please check the demo page or visit the official website.