Cross-Browser Support

This module provides a plugin to use common cross-browser support code within your application.

Usage

Installation

A CodeyCrossBrowserSupport vue plugin makes it easy to use the scripts that are part of this module. Individual cross-browser support scripts can be used anywhere. Choose whatever works best for your application.

App.vue (Default)

<script setup lang="ts">
import { createApp } from "vue";
import App from "./App.vue";
import { CodeyCrossBrowserSupport } from "@xerius/codey-core/modules/cross-browser-support"; 

const app = createApp(App);
app.use(CodeyCrossBrowserSupport); 
</script>

App.vue (With options)

<script setup lang="ts">
import { createApp } from "vue";
import App from "./App.vue";
import { CodeyCrossBrowserSupport } from "@xerius/codey-core/modules/cross-browser-support"; 

const app = createApp(App);
app.use(CodeyCrossBrowserSupport, {
  disableIOSInputZoom: false, 
}); 
</script>

page.ts

import { disableIOSInputZoom } from "@xerius/codey-core/modules/cross-browser-support";

const restore = disableIOSInputZoom();

Options

Option	Default	Description
disableIOSInputZoom	true	Disables autozoom on input fields with font-size < 16px on iOS.

disableIOSInputZoom

Disables autozoom on input fields with font-size < 16px on iOS.
It does this by changing part of the <meta name="viewport"> value specifically on iOS to achieve best cross-device a11y results.
If the vue app unmounts the initial meta viewport tag will be restored.