Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including device-display with all npm packages installed. Try it out:

var deviceDisplay = require("device-display")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

device-display v1.0.1

Render any URL within a fully interactive Desktop, Mobile, or Tablet display

Device Display

Demo Demo


Description

Render any URL within a fully interactive Desktop, Mobile, or Tablet display.

Usage

  • Add iframes to the DOM as usual
<iframe id="frame" src="http://espn.com" frameborder="0"></iframe>
  • Initialize the device
var DeviceDisplay = require('device-display');

var frame = document.getElementById('frame');
            
DeviceDisplay(frame, {
    src: '/assets/mac.png',
    scale: 0.4,
    screen: {
        // ABSOLUTE POSITION OF SCREEN WITHIN IMAGE
        // MUST BE HARDCODED FOR NOW
        // MAY OPT TO BUILD AN IMAGE PARSER FOR THIS STEP IN LATER RELEASES
        top: '50px',
        left: '180px',
        width: '1200px',
        height: '760px',
    }
})
.then(function (element) {
    // NEW WRAPPER ELEMENT AROUND IFRAME
}).catch(function () {
    // ERRORS IF ANY OPTIONS FAIL
})

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free