[VUE.JS]Change the settings of meta in head –viewport change

0

Because it was possible to change the viewport by the screen size at the time of loading, I write it as a memorandum.

Change meta tag,viewport by screen size

export default {
    created() {
        this.setViewport();
    },
    methods: {
        setViewport: function() {
            let changeWindowSize = 375
            let viewportContent = "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
            if (window.innerWidth < changeWindowSize ) {
                viewportContent = "width=375,user-scalable=no,viewport-fit=cover"
            }
            document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent)
        }
    }
}

In short, in window.innerWidth, we get the screen size and change the value you want to set to the Viewport.
The attribute is set below document.querySelector.

Note: Detect and change screen resizing

If you want to change the viewport to match the user's window size, rather than changing the initial screen size

export default {
    created() {
        //Detect window risize
        window.addEventListener('resize', this.setViewport)
        this.setViewport();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setViewport)
    },
    methods: {
        setViewport: function() { 
            let changeWindowSize = 375 
            let viewportContent = "width=device-width,initial-scale=1.0" 
            if (window.innerWidth < changeWindowSize) { 
                viewportContent = "width=375,user-scalable=no,viewport-fit=cover" 
            } 
            document.querySelector("meta[name='viewport']").setAttribute("content", viewportContent) 
        }
    }
}

  
window.addEventListener detects screen resizing and calls function.
Screen size change detection → function call, you may be quite often used.

※ 2020/6/13 as of: A bug that keeps detecting the resize when the size of the display is enlarged in WINDOW10.
I don't know if it's just my environment, but please be careful.

VUE.JS Recommended Books

I think that you are a reader of books, but I realize that you can learn more deeply by implementing them in the field.
On the other hand, if you focus on implementation, you will not be able to think of better coding, so it is recommended that you read the book again.
Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript