リキッド/PC幅固定の viewport 設定（ソリッドレスポンシブ）

リキッドレイアウトとPC幅固定レイアウト（タブレットでPCのレイアウトを表示する）の viewport設定色々

PC幅固定（ソリッドレスポンシブ JavaScript & matchMedia 画面幅 768px）

HTML

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

CSS

@media screen and (min-width: 768px),print {
	body {
		min-width: 1280px; //PCデザインの幅
	}
}

JavaScript

const mediaQueryList = matchMedia('(min-width: 768px)');
mediaQueryList.addEventListener('change', onMediaQueryChange);
function onMediaQueryChange(mediaQueryList) {
	if(mediaQueryList.matches === true) {
		document.querySelector("meta[name='viewport']").setAttribute("content", "width=1280");
	} else {
		document.querySelector("meta[name='viewport']").setAttribute("content", "width=device-width,initial-scale=1.0,viewport-fit=cover");
	}
}
onMediaQueryChange(mediaQueryList);

PC幅固定（JavaScript + ユーザーエージェント）

タブレットではPCと同じデザインを表示する設定です。

HTML

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

CSS

@media screen and (min-width: 768px),print {
	body {
		min-width: 1280px; //PCデザインの幅
	}
}

JavaScript

function setViewport() {
	if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
		document.querySelector("meta[name='viewport']").setAttribute("content", "width=device-width,initial-scale=1.0,viewport-fit=cover");
	} else {
		document.querySelector("meta[name='viewport']").setAttribute("content", "width=1280");
	}
}
window.addEventListener('DOMContentLoaded', setViewport, false);
window.addEventListener('resize', setViewport, false);

PC幅固定（CSS）

768px以上ではPCと同じデザインを表示する設定です。

HTML

<meta name="viewport" content="width=device-width">

CSS

body {
	min-width: initial;
}
@media screen and (min-width: 768px),print {
	body {
		min-width: 1280px;
	}
}

---

PC幅固定時のCSSの書き方

@media screen and (min-width: 768px),print {
	body {
		min-width: calc(1280px);
	}

	.content {
		margin-right: auto;
		margin-left: auto;
		padding-right: 20px;
		padding-left: 20px;
		width: 1200px;
	}
}

// .content の部分はmediaをPCサイズに限定せず max-width でも良いかも

---

参考サイト

JavaScriptでスマホ判定する2つの方法

iPadをPC表示にする際のレスポンシブ対応

自分検索用キーワード: ソリッドレスポンシブ アダプティブレイアウト PC幅固定 iPad PC表示