Contact us
Get started

Directory

← Back

screen-env

Differentiate screen types by size, touch ability, and more.

Author

Contributors

Rating

Links

[ This description is mirrored from README.md at github.com/jifalops/screen-env on 2019-05-10 ]

Published on webcomponents.org

screen-env

Differentiate screen types by size, touch ability, and more.

Installation

bower install --save screen-env

Usage

  • Bind to the screen-env properties you are interested in.

Demo

<screen-env
  narrow-width="{{narrowWidth}}"
  is-touch="{{isTouch}}"
  ua-is-desktop="{{uaIsDesktop}}"
  is-mobile="{{isMobile}}">
</screen-env>
<table border="1">
  <tr><th colspan="3">Main abilities</th></tr>
  <tr><td>narrowWidth</td><th>[[narrowWidth]]</th>
      <td>Mobile/tablet+, (600px or less)</td></tr>
  <tr><td>isTouch</td><th>[[isTouch]]</th>
      <td>false: no browser support<br/>
          null: browser support<br/>
          true: touchstart has occurred</td></tr>
  <tr><td>uaIsDesktop</td><th>[[uaIsDesktop]]</th>
      <td>User requested desktop site</td></tr>
  <tr><td>isMobile</td><th>[[isMobile]]</th>
      <td>Material design + UA/media check</td></tr>
  </table>

Full demo: webcomponents.org | github.

API: webcomponents.org | github.

Contributing

  1. Fork it on Github.
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

License

MIT

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

polymer#^1.8.1

  • iron-media-query#^1.0.8
Released
2017-04-03
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent

screen-env - Vaadin Add-on Directory

Differentiate screen types by size, touch ability, and more. screen-env - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/jifalops/screen-env](https://github.com//jifalops/screen-env/blob/0.3.0/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jifalops/screen-env) # screen-env Differentiate screen types by size, touch ability, and more. ## Installation ``` bower install --save screen-env ``` ## Usage * Bind to the `screen-env` properties you are interested in. ## Demo ```html
Main abilities
narrowWidth[[narrowWidth]] Mobile/tablet+, (600px or less)
isTouch[[isTouch]] false: no browser support
null: browser support
true: touchstart has occurred
uaIsDesktop[[uaIsDesktop]] User requested desktop site
isMobile[[isMobile]] Material design + UA/media check
``` Full demo: [webcomponents.org](https://www.webcomponents.org/element/jifalops/screen-env/demo/demo/index.html) | [github](https://jifalops.github.io/screen-env/components/screen-env/demo/). API: [webcomponents.org](https://www.webcomponents.org/element/jifalops/screen-env/screen-env) | [github](https://jifalops.github.io/screen-env). ## Contributing 1. Fork it on Github. 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request ## License [MIT](https://opensource.org/licenses/MIT)
Online