はじめに
こんな方に読んで欲しいです。
スタイルを作成する時に
- 色んなデバイスを考慮するのがめんどくさい
- レスポンシブなフレームワークを使っても、デバイスサイズによって改行位置とかが微妙にずれてきになる
- PCとSPでカラム数を変える必要がない
- 1カラムを想定している
- 解像度が高いPCだとコンテンツに対する余白の割合が多すぎて気になる
この記事で紹介する方法を用いると
- 固定幅のデザインを1つ作成するだけでOK
- どんなデバイスでも同じ見栄えになる
それでは…
仕組み
仕組みはっても単純です。
例えば幅1000pxのページをデザインしたとします。そしたらjsがウィンドウサイズに応じて適切な倍率を計算して設定してくれます。
- ウィンドウサイズが1000pxの時は何もしない
- ウィンドウサイズが2000pxの時は200%にする
- ウィンドウサイズが500pxの時は50%にする
値は極端ですが、イメージできたでしょうか。モバイル端末ではPCサイトで見る画面をそのまま縮小して表示されます。沢山カラムのあるサイトには向きませんが、1カラムのサイトであれば「小さ過ぎて拡大しなきゃ見えね～よ！」にはならなそうです。
4Kディスプレイを搭載したPCではどうなるでしょうか。計算しやすいように幅を4000pxだとすると、通常1000pxのページであれば、約3/4が余白になってしまいます。この仕組みを使えば余白のない全画面表示が可能になります。
さらにポイントは画面サイズではなく、ウィンドウサイズを見て倍率を調整できる点です。PCではブラウザを全画面表示しないで使うケースも多いと思いますが、現在のウィンドウサイズを識別して自動で拡大縮小します。勿論、ロード後にウィンドウサイズを変更したり、全画面表示に切り替えても都度拡大縮小処理を行ってくれます。
ソース
test.html
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ウィンドウサイズに応じて倍率を自動調整する</title>
<style>
body {
width: 500px;
transform-origin: 0 0;
margin: 0;
}
</style>
<p>私は一番もうそんな威圧ごとというもののためを射しなた。どうしても直接に話団もしばしばそのお話しないんくらいが得るがいるんからは推察ありたましのに、どうには上げたたですた。</p>
<script>
var change_scale = {
"container": 500,
"percent": 1,
"function": function() {
"use strict";
if (change_scale.percent === window.devicePixelRatio) {
var scale = document.documentElement.clientWidth;
scale = scale / change_scale.container;
scale = "scale(" + scale + ")";
document.body.style.transform = scale;
} else {
change_scale.percent = window.devicePixelRatio;
}
}
};
(function() {
"use strict";
if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
if (window.devicePixelRatio !== 1) {
alert("申し訳ございません。スタイルが崩れている可能性があります。恐れ入りますが、倍率を100%に変更後、リロードしてください。")
}
}
change_scale.function();
}());
window.addEventListener("resize", function(event) {
"use strict";
change_scale.function();
});
</script>