ブラウザの倍率を割り出すのに、ついこの間まで苦労していました。devicePixelRatioが、すべてのブラウザで利用できるようになっています。これは、朗報です。

　パソコンでは、ブラウザにおける拡大率に相当します。スマホでは、拡大表示していても不変で、機器のピクセル数／表示ポイント数です。タブレットは、おそらく、スマホと同じでしょう。つまり、devicePixelRatioの意味合いが、デバイスにより異なります。実装には、スマホ＆タブレット／パソコン分岐処理が必要です。

　パソコンにおいて詳しく見てみると、関連しているinnerWidthとouterWidthの挙動が、ブラウザによって異なっています。

--
パソコン機器の解像度1366x768
ブラウザを最大化したときの挙動

windiow.outerWidth（不変）
─
Edge IE11 Chrome Firefox Opera
1382 1382 1366   1382    1366

　何故、Edge, IE11, Firefoxでは1382x784になるのかは不明。

windiow.innerWidth
─
     Edge IE11 Chrome Firefox Opera
0.50:2732（すべて）
0.75:1821 1821 1821      -    1821
1.00:1366（すべて）
1.25:1093 1093  1093     -    1093
1.50: 911（すべて）
1.75: 781  781   780     -     780
2.00: 683（すべて）

　1.75倍のとき、780.57を小数点以下四捨五入すれば781ですが、何故、Chrome, Operaでは780になるのかは不明。
--

　つまり、1ピクセルもずれないようにするには、innerWidthを使う必要があります。

※下記は、あとで追記します。

screen.width
screen.height

screen.availWidth
screen.availHeight

document.documentElement.clientWidth
document.documentElement.clientHeight


P.S. ちなみに、iPhone5c(iOS10)では window.innerWidthは不変で正確に出ますが、window.outerWidthは不変で0です。

　Webページを作成するときに、デバイス分岐を熟知しておきたいものです。

　スマホとタブレットとパソコンを区別してみましょう。

--
$ua = navigator.userAgent;
$ua = $ua.toLowerCase();

if( $ua.indexOf("Windows Phone")!=-1 ){
  // Windows Phone
}else if( $ua.indexOf("iphone")!=-1 ){
  // iPhone  
}else if( $ua.indexOf("ipad")!=-1 ){
  // iPad  
}else if( $ua.indexOf("android")!=-1 ){
  if( $ua.indexOf("mobile")!=-1 ){
    // Android スマホ
  }else{
    // Android タブレット
  }    
}else{
  // パソコン
}
--

　日本では、スマホのほとんどがiPhoneとAndroidですが、Windows Phoneも0ではありません。実際に、我が奈半利町にWindows Phoneを利用されている方がおられてビックリしたのはついこの前のことでした。でも、Windows Phoneは、すぐフリーズして使い物にならないことが分かりました。

　Windows Phoneのエージェントにはすべてのキーワードが含まれているので、筆頭に分岐を施します。相変わらず、Microsoftの嫌らしい戦術ですが、致し方ありません。

　次いで、メインであるiOSとAndroidを分岐していきます。mobileが含まれているのは、iPhone、iPad、Androidスマホです。Andriodタブレットには、含まれていません。

　残ったのはパソコンとなります。Windows、Macintosh、Linuxで分岐してから、ブラウザ分岐するのもいいでしょう。

　なお、スマホとタブレットのブラウザは、iOS(iPhone、iPad)ではSafari、AndroidではGoogle Chromeが標準ですが、他のブラウザを利用されている少数派の方もおられます。必要に応じて、ブラウザ分岐しましょう。

　PHPでデータベースが簡単に使えるので、JavaScriptで多次元配列を使うことは無かったのだが、お仕事のプログラミングで使うことになり、これまた良い機会だと時刻表のプログラミングに使ってみた。

　JavaScriptでは、配列の宣言は、下記のように説明されていることが多い。

--
変数 = new Array(項目1,項目2,項目3,項目4,項目5);
--

　実は、同じ内容を次のように記述できる。

--
変数 = [項目1,項目2,項目3,項目4,項目5];
--

　この記述方式だと、多次元配列も簡単に書ける。時刻表を三次元配列で格納してみた。各時刻表には、["05:30","05:34","05:39","05:42"・・・] などと同一列車の各駅の時刻を記述している。

--
$time = [
[[上り時刻表0],[上り時刻表1],[上り時刻表2]・・・],
[[下り時刻表0],[上り時刻表1],[上り時刻表2]・・・]
];
--

　下り時刻表2の10番目の時刻は、$time[1][2][9]となる。三次元にして、上りと下りを区別しているところが味噌である。

　実際の時刻表のソースを公開する。自由にご利用下さい。文字化けするときは、テキストエンコーディングをUTF-8に変更してみて下さい。

　スマホかパスコンか判別するときに、JavaScriptにせよPHPにせよ、ブラウザのエージェントで判別していました。当面は問題無いのですが、漏れが生じる可能性があります。

　そこで『タップイベント』が利用できるかどうかで、判別した方が合理的です。下記は、ページ読み込み完了後、デバイス判定するJavaScriptです。

--
if(window.addEventListener){
  window.addEventListener('load',_init,false);
  
}else if(window.attachEvent){
  window.attachEvent('onload',_init);
}

function _init(){
  if("ontouchstart" in window){
    $device = 'mobile';
  }else{
    $device = 'pc';
  }
  alert($device);
}    
--

　自分なんかは、window.onload = function(){内容}が簡単で好きです。

　window.onload は、複数あると上書きされるため、最後の１つだけが作動します。しかし、addEventListenerとattachEventは起動時の関数を複数動作させられるという利点があります。

　IE11とOperaは、addEventListenerはダメで、attachEventなんです。

　なお、この判定だと、タブレットはパソコンではなくスマホと同じとなります。


　また、タブレットやスマホでは、onclickでは動作が鈍いそうです。下記の記述で、デバイスによりtouchstartかclickを使い分けできます。

--
var $tap = window.ontouchstart===null?"touchstart":"click";
 
var $target = document.getElementById("id");
$target.addEventListener($tap,function(){内容}, false);    
--

　元々、『猫の手 NeCoNote』は、Webページ上のオブジェクトの自由レイアウトを実現したプログラムでしたが、ニーズが無かったので、その機能を省いてきました。

　今回、ログイン画面のキーにおいて、『オブジェクトのドラッグ＆ドロップ』を利用としたら、スマホに対する記述が結構大変なので、ライブラリーが落ちていないか調べると素晴らしいプログラミングに出会いました。「商用,改変,再配布はすべて自由ですですが、動作保証はありません」とあるので、遠慮なく利用させて頂きます。

　ところが、ダウンロードしたVer.0.92では上手く動きません。おかしいなあと、上手く動いているページのソースを見てみると、Ver.0.91を利用しています。異なっている部分は、Ver.0.91で164行～183行と237行でした。解析中。

　とりあえず、Ver.0.91で、Windows10(Edge,IE11,GC,FF,Opera)でもiOS10(Safari)でも問題なく動いているので、そのまま利用させてもらいます。


P.S. 作者のWebページ中に誤字もあるので、プログラム解析が終わったら合わせて教えて上げよう。2016年の作品か、凄いな、よく出来ています。JavaScriptをもうちょっと勉強したくなりました。


P.S.2 自分は、同じような機能を、以前いた会社で作っていて、パソコンでは辛うじて作動するけど、スマホには対応させていませんでした。ブラウザの初期設定を停止させて、新しい機能を追加するなど、面倒くさいので放ってあります。ここで紹介したプログラムは、分かりやすく記述してあります。勉強になります。