CSSにて解像度が変わっても見え方を同じにする方法

Question

HTML CSS での質問です。

タブレット用のページを作成するとして、当然機種ごとに解像度が違ってきます。

基本の解像度をNexus７ 2012 にあわせ（1280x800）CSSを作成したとします。

そして今度はNexus7 2013（解像度1920x1200）でそのページを見た場合。

見え方が2012の時とほぼ同じにする場合、参考になるサイトなどを教えてください。

Answer 1

cssを作成する際、viewportの指定はされていますでしょうか？
もしされている場合、横幅は変わってきます。

nexus 7の解像度が1280 * 800でretinaの場合、半分の640 * 400などになります。

また、cssに関してですが、widthなどを出来るだけ%表示にすることでどの大きさの画面で見ても同じようなレイアウトをすることができます。
画面が更に大きくなり同じようなレイアウトでは厳しい場合は、cssのmedia queryを使用してレイアウトごと変えてしまいましょう！

bootstrapなどがいい感じにその辺の実装をしているのでbootstrapを最初に見てみるのもありかもしれませんよ！

頑張ってください！

Answer 2

cssのみでは難しいと思います
javascriptで調整すれば行けるのではないでしょうか

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
// 画面幅800px基準でzoomをセット
$("html").css("zoom", $(window).width() / 800);
$(window).bind({
    "resize load orientationchange" : function(event) {
        var zoom = $(window).width() / 800;
        $("html").css("zoom", zoom);
    }
});
</script>

Comments

[mantohihi]

この場合だと８００でがっちりしたデザインを組んでおけば、とりあえずは大丈夫ということでしょうか？

[yskfj]

1つ忘れてました
ビューポートの設定を忘れずに
```html
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
```
いろいろやっていくうちに問題が出てくるかもしれませんが「とりあえずは大丈夫」だと思います。
まずは簡単なページを作ってみてください。