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

0

読み込んだ際の画面サイズで、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でディスプレイのサイズを拡大しているとなぜかリサイズを検知しつづけるバグ？がありました。
私の環境だけかはわかりませんがご注意を。

VUE.JSおすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

これからはじめるVue.js実践入門
JavaScript、Vue.jsの知識がある程度ある方向け

Vue.jsのツボとコツがゼッタイにわかる本
初心者向け