Skip to content

Latest commit

 

History

History
36 lines (24 loc) · 1.61 KB

README.md

File metadata and controls

36 lines (24 loc) · 1.61 KB

Mobile plugin

A Vue plugin that provides a set of functionalities to help you manage mobile screens - and setups some things for you without you have to do nothing: always register this into your applications!

Dependencies

  • Vue

Usage

Import the plugin and register it:

import mobilePlugin from "@/../ditto/mobile";
Vue.use(mobilePlugin);

Functionalities

The plugin registers a viewport unit variable to solve the mobile viewport height issue (see here). If your app uses vuetify the plugin automatically inject some css to fix this issue and you don't have to do nothing until you work inside the <v-app> tag. If you need it you can use this variable as follow:

.your-root-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100); /* 100% height using the --vh property */
}

This plugin also provide a set of utility methods to manage the fullscreen:

  • openFullscreen: a function to display the application in full-screen mode
  • closeFullscreen: a function to exit from full-screen mode
  • isFullscreenEnabled: a property that tells you whether or not it is possible to engage full-screen mode; the property is false if full-screen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or full-screen mode not being supported by your browser)
  • isFullscreenMode: a function that returns true if the application is currently displayed in full-screen mode

These methods are available at Vue.prototype.$mobile.