読み込んだ際の画面サイズで、viewportを変更することがあったので、備忘録として書いておきます。
metaタグ,viewportを画面サイズで変更する
javascript
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を変えたい場合
javascript
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おすすめの書籍
書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。
逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。
JavaScript、Vue.jsの知識がある程度ある方向け
📦Amazon で関連書籍・ツールを検索
Vue.js フロントエンド入門
Amazonで探す →（アソシエイトリンク）