Skip to content

4.0.0

Latest
Latest

Choose a tag to compare

View all tags
@pixelsign pixelsign released this 29 Oct 18:13
4.0.0
This tag was signed with the committer’s verified signature.
pixelsign Angelos Arnis
GPG key ID: 905568CFA0C88FAD
Verified
Learn about vigilant mode.
fcac3e1
This commit was signed with the committer’s verified signature.
pixelsign Angelos Arnis
GPG key ID: 905568CFA0C88FAD
Verified
Learn about vigilant mode.

What's new

  • iPhone XS and iPhone XS Max in silver, gold and space grey, portrait and landscape.
  • Exact screen shapes for notched iPhones. Content on the XS and XS Max is clipped to the real screen: notch, notch corners and rounded display corners, at any size. Previously the corners were a fixed 8px radius and the notch was approximate.
  • New demo page at https://pixelsign.github.io/html5-device-mockups/ — search and filter devices, switch orientation and finish, drop in your own screenshot, and copy the markup.
  • Devices that are long out of use are marked Obsolete in the README and demo. They still work.

Breaking changes

  • The "in hand" frames are removed: iPhone6Hand, iPhone7Hand and iPhone7Hand_2. Pages using these data-device values will no longer show a frame. Stay on 3.x if you need them.
  • The XS and XS Max screens now use CSS mask-image, supported by all current browsers.

Fixes

  • dist/device-mockups.min.css is rebuilt from source and matches device-mockups.css again (the two had drifted apart).
  • iPhone XS / XS Max landscape frames no longer cover the screen content.

Installing

  • CSS file: download dist/device-mockups.min.css and the device-mockups/ folder from this release.
  • npm: 4.0.0 is not on the npm registry yet (npm i html5-device-mockups still gives 3.2.1). Install it from GitHub instead:
    npm i github:pixelsign/html5-device-mockups#4.0.0
  • Bower: bower install html5-device-mockups

For contributors

The build now uses Dart Sass instead of Grunt and node-sass: npm install, then npm run build. It runs on current Node versions and has no known vulnerabilities.

Assets 2
Loading