13070


<http://g.co/racer> のように、複数のデバイス間で画面の見た目を揃えるにはどうしたらいいのでしょうか？

まずはCSSの実寸指定やviewportを使うことを考えたのですが、これらを使っても画面上でのサイズを正確に指定することはできないようで、失敗。

[code]

    <!--次のコードでは、画面上に表示される要素のサイズは1cmになりません。-->
    <div style="width:1cm:height:1cm"></div>
    
[/code]

JSから取り込まれる要素のサイズは、viewportの指定に関係なく一定だということに気づいたのですが、それとJSから取得されるスクリーンサイズを計算しても、デバイスの実寸にはなりませんでした。

[code]

    //スクリプトから、幅1cmを指定した要素の幅を取得するも、これも当てにならない模様
    console.log(screen.availWidth/document.getElementById("width_1cm").offsetWidth);
    
[/code]

スクリーンの幅をCSSで幅100vwに設定した要素から取得しても同じ結果に。  
調べてみると、<https://developer.mozilla.org/ja/docs/Web/CSS/Length>
の記述によれば、CSSの絶対単位はデフォルトで96dpiを基準に定められていて、正確なサイズを出すのには使えないのだそうで……ならば、一体上記のRACERはどのようにして画面サイズを揃えているんでしょうか？  
お分かりの方おられましたら、よろしくお願いいたします。


CC BY-SA 3.0
2015-02-15T05:00:03.597
6511
2015-08-05T10:00:06.913
2015-02-15T05:17:56.407
7229
7229
question
javascript css
モバイルデバイスの画面の実寸を把握するには？


端末により解像度が違います。  
またviewportで解像度を指定されている物もあるので確実とは言えませんが、  
おおよその値であれば下記で出せます。  
ですが、大きな値になればなるほどズレが大きくなっていくのでご注意を……

[code]

    //1inch=2.54cm
    var INCH_PAR_CM = 2.54;
    
    /**
     * pxをcmに変換
     * @param Integer pixel
     **/
    function change_px_for_cm(px_val){
     //画面解像度取得
     var dpi = getDPI();
     //1cm内のpx数
     var cm_in_px = dpi / INCH_PAR_CM;
     //変換
     return (px_val / cm_in_px);
    }
    
    /**
     * 1インチの要素を作って画面解像度を取得
     **/
    function getDPI(){
     var dpi=0;
     var div = document.createElement('div');
     div.setAttribute('style', 'height:1in;left:-100%;top:-100%;position:absolute;width:1in;');
     document.body.appendChild(div);
     dpi = div.offsetHeight;
     document.body.removeChild(div);
     div = null;
     
     return dpi;
    }
    
    /**
     * 入力値実測
     **/
    function change_start(){
     var pix = document.getElementById("val").value;
     if(isFinite(pix)){
            document.getElementById("in_size").style.width = pix+"px";
      document.getElementById("res").innerHTML = change_px_for_cm(pix)+"cm / "+getDPI()+"dpi";
     }else{
            document.getElementById("res").innerHTML = "数値を入れてください";
        }
    }
[/code]

[code]

    #in_size{
      background-color:#00f;
      width:64px;
      height:64px;
    }
[/code]

[code]

    <input type="text" id="val" /><button onclick="change_start()">start</button>
    <div id="res"></div>
    <div id="in_size"><div>
[/code]

**追記：**  
`cm_in_px`を使えば1cmあたりのピクセル数が出るので  
「端末間で5cmに統一したい」ってなった場合  
`setting_pixel = cm_in_px * 5`のように出せると思います。


CC BY-SA 3.0
2015-08-05T09:44:55.670
13070
2015-08-05T10:00:06.913
2015-08-05T10:00:06.913
7676
7676
6511
answer