本番環境より小さい画面での開発時

Question

HTMLでHDサイズ（1920x1080px）のモニターで表示するためのコンテンツをつくることになりました。
開発するのは普段使っているMacBookProで画面サイズがHDではありません。Bodyや全体を囲むdiv要素にスタイルシートでwidth:1920と指定すれば、本番環境のモニターではちゃんと表示されますが、開発時は当然ですが画面に収まりません。
幅は1920pxと設定しておき、実際の画面サイズに収まるように縮小表示するなどうまい解決法はないでしょうか？実際にプロの方などはどのような方法を取られていますが？
よろしくお願いします。

Answer 1

ほぼ同じ回答の方もいらっしゃるのですが、
左上基準で縮小しちゃうのが一番見やすいですかね。
ブラウザのズーム機能だとテキストの縮小に限界があるので…
個人的にはcssで縮小しちゃった方が確実な気がしてます。

body {
	transform-origin:0 0;/* 縮小左上基準 */
	transform: scale(0.5);/* 縮小表示倍率 */
}

Comments

[D.O]

webnohitoさん

＞左上基準で縮小しちゃうのが一番見やすいですかね。
やっぱりそうなんですね。
今回はこれでやってみます。
ありがとうございます。

Answer 2

VirtualBoxのスケールモードはいかがでしょうか？

Comments

[D.O]

VirtualBoxいれてないんです。
やっぱり普通はいれてるもんですか？

[tchofu]

普通と言われると困るのですが、私は仮想環境なくして開発が困難ですし、Windowsで使える仮想環境としてはVirtualBoxが一番好きです。

Answer 3

コンソールとしてWebアプリ作る場合とか、画面幅きっちりって指定ありますよね。

一番手っ取り早いのは、一番外側のdivに1920幅のborder引いて視覚化させておいて、ブラウザの縮小表示機能で小さくして確認するのが楽じゃないですかね？
最近のブラウザならどれもズーム表示できるはずです。MacBookならトラックパッドのピンチ操作でできませんでしたっけ？

Answer 4

本題とはちょっと逸れますが…
画面サイズが1920pxだからといって、まんま1920px横幅とったら間違いなくスクロールバーが邪魔をします。

で、本題ですが、CSSなんかはリキッドレイアウトにして、画像は開発時だけwidthを50%とかにすれば、まあそれなりにできないことはないかと思います。

Comments

[D.O]

yu-riさん
こめんとありがとうございます。
今回は，縦方向もぴったりでスクロールしない感じで作るんで大丈夫なんです。

全部%指定ってのもいいのかもしれませんね。
プロの方々はどうしているんでしょうか？

Answer 5

手っ取り早く確認するならtransformで縮小させちゃうとかですね。

body {
    transform-origin: 50% 0%;
    transform: scale(0.5);
}

こんな感じで。

[追記]
ちなみに最近のブラウザならズームがスケールで行われるので、ブラウザ機能だけでも問題ないかもしれません。

Comments

[D.O]

確かに縮小しちゃうのは手っ取り早いですよね。
今回はこれでやってみます。
ありがとうございます。