[VUE.JS]Vue head内metaの設定を変更する–viewport変更

読み込んだ際の画面サイズで、viewportを変更することがあったので、備忘録として書いておきます。

metaタグ,viewportを画面サイズで変更する

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)
        }
    }
}

簡単に解説すると、window.innerWidthで、画面サイズを取得し、Viewportに設定したい値を変更しています。
document.querySelector以下で、属性を設定しています。

補足:画面サイズ変更を検知して変更する

初期の画面サイズで変更でなく、ユーザのウィンドウサイズ変更に合わせてviewportを変えたい場合

export default {
    created() {
        //window変更を検知
        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で画面サイズ変更を検知して、関数を呼び出しています。
画面サイズ変更検知→関数呼び出しは、結構使うことが多いかもしれません。

※2020/6/13現在:WINDOW10でディスプレイのサイズを拡大しているとなぜかリサイズを検知しつづけるバグ?がありました。
私の環境だけかはわかりませんがご注意を。