<meta name="viewport" content="width=device-width">
initial-scale の設定をしないのがポイントです。CSSはBODY要素にmin-widthを指定し、スマートフォン用のメディアクエリでmin-widthを初期化します。
body {
// PC用の横幅を指定
min-width: 1080px;
}
// スマートフォンのブレイクポイント
@media screen and (max-width: 769px){
body {
// 初期化
min-width: initial;
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter