ViewportChange.js Event

Small script that adds the "viewportchange" event, which is fire it when the size screen change (fullscreen <-> normal screen, portrait <-> landscape (mobile), hidding buttons bar (android phones), also this script adds to window the getRVP() method, this method will get you a plain object with following format:

let rvp = {
            pvh: 123,  //Portrait  viewport height (similar to vh css unit)
            pvw: 123,  //Portrait  viewport width  (similar to vw css unit)
            lvh: 123,  //Landscape viewport height
            lvw: 123   //Landscape viewport width
        };

Compatibility

For internet explorer 11 or higher.

How to use?

This script require Device.js preloaded, and then import viewportchange.js JavaScript library wherever you want into the document before using it.

<script src="Device.min.js"></script>
<script src="ViewportChange.min.js"></script>
<script>
    window.onViewportChange = function(e){
      console.log(e.data || window.getRVP());
    }
  
    window.addEventListener("ViewportChange", function(e){
      console.log(e.data || window.getRVP());
    }, false)
</script>

or

<script defer src="Device.min.js"></script>
<script defer src="ViewportChange.min.js"></script>
<script defer src="otherScript.js"></script>

or

<script type="module" src="Device.min.js"></script>
<script type="module" src="ViewportChange.min.js"></script>
<script type="module" src="otherScript.js"></script>

or

<script type="module">
    import "Device.min.js";
    import "ViewportChange.min.js";
    
    window.onViewportChange = function(e){
      console.log(e.data || window.getRVP());
    }
  
    window.addEventListener("ViewportChange", function(e){
      console.log(e.data || window.getRVP());
    }, false)
</script>

Demo

https://erovas.github.io/viewportchange.js/

Authors

• Emanuel Rojas Vásquez - Initial work - erovas

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

Spanish - Español

viewportchange.js

Pequeño script que agrega el evento "viewportchange", el cual es disparadao cuando el tamaño de la pantalla cambia (fullscreen <-> normal screen, portrait <-> landscape (mobile), hidding buttons bar (android phones), además este script agrega a window el metodo getRVP(), este metodo te dará un objeto plano con el siguiente formato:

let rvp = {
            pvh: 123,  //Portrait  viewport height (similar to vh css unit)
            pvw: 123,  //Portrait  viewport width  (similar to vw css unit)
            lvh: 123,  //Landscape viewport height
            lvw: 123   //Landscape viewport width
        };

Compatibilidad

Para internet explorer 11 o superior.

¿Cómo utilizarlo?

Este script requiere Device.js precargado, y después importar viewportchange.js JavaScript library en cualquier parte dentro del documento antes de usarlo.

<script src="Device.min.js"></script>
<script src="ViewportChange.min.js"></script>
<script>
    window.onViewportChange = function(e){
      console.log(e.data || window.getRVP());
    }
  
    window.addEventListener("ViewportChange", function(e){
      console.log(e.data || window.getRVP());
    }, false)
</script>

o

<script defer src="Device.min.js"></script>
<script defer src="ViewportChange.min.js"></script>
<script defer src="otherScript.js"></script>

o

<script type="module" src="Device.min.js"></script>
<script type="module" src="ViewportChange.min.js"></script>
<script type="module" src="otherScript.js"></script>

o

<script type="module">
    import "Device.min.js";
    import "ViewportChange.min.js";
    
    window.onViewportChange = function(e){
      console.log(e.data || window.getRVP());
    }
  
    window.addEventListener("ViewportChange", function(e){
      console.log(e.data || window.getRVP());
    }, false)
</script>

Demo

https://erovas.github.io/viewportchange.js/

Autores

• Emanuel Rojas Vásquez - Initial work - erovas

Licencia

Este proyecto está licenciado bajo Licencia BSD 3-Clause - ver el archivo LICENCIA para mas detalles.