https://www.nasluck.co.jp/common/js/viewport.js

1/* -------------------------------------------------------------------------
2
3	CREATIVE.viewport
4
5	viewport切り替えのスクリプトを定義
6	※jQuery不要
7	
8
9	（利用方法）
10	headのviewportの直後にviewport.jsを読み込む
11	<meta name="viewport" content="width=1140">
12	<script src="/assets/js/viewport.js"></script>
13
14------------------------------------------------------------------------- */
15
16// グローバル名前空間定義
17var CREATIVE;
18if (!CREATIVE) CREATIVE = {};
19if (!CREATIVE.viewport) CREATIVE.viewport = {};
20
21(function (){
22	// グローバル名前空間オブジェクトをローカルオブジェクトに置き換え
23	var ns = CREATIVE.viewport;
24
25	ns.switchViewport = function() {
26		// viewportのcontentを幅で振り分け
27		var viewportContent = ( window.screen.width > 768 ) ? "width=1536" : "width=device-width,initial-scale=1";
28		
29		// 既存viewport削除
30		var viewport = document.getElementsByName("viewport");
31		if( viewport.length > 0 ) {
32			for(var i=0; i <= viewport.length; i++){
33			   viewport[i].parentNode.removeChild(viewport[i]);
34			}
35		}
36		
37		// viewportセット
38		var viewport = document.createElement("meta");
39		viewport.setAttribute("name", "viewport");
40		viewport.setAttribute("content", viewportContent);
41		
42		document.getElementsByTagName("head")[0].appendChild(viewport);
43	}
44
45	window.addEventListener( 'resize', function() {
46		CREATIVE.viewport.switchViewport();
47	});
48
49})();
50
51
52CREATIVE.viewport.switchViewport();