ガレコレ [Garage Collection]
2019年5月22日(水)
ブラウザのズーム #■パソコン・通信
 ブラウザのズーム機能は、ショートカットでは[Ctrl]+[-]縮小/[Ctrl]+[0]100%/[Ctrl]+[+]拡大で、画面の拡大縮小を行う機能で、多くの方が110%、125%、150%に拡大して観られています。

 スマホでは、スマホ用画面を用意するので問題無いのですが、パソコンでは、ズーム100%で設計した画面は、それ以外のズーム率ではレイアウトが狂ってしまいます。

 悲しいかな、HTML5、CSS3、JavaScriptでは、未だブラウザのズーム(画面拡大率)を制御できません。インターネット検索しても解決策を発見できませんが、トドロ@ガレコレは、諦めません。自称ホームページ・マスターの名に懸けて。


 window.devicePixelRatioは、現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。現パソコンは、CSS解像度=物理解像度であり、ズーム100%で1、ズーム150%で1.5となります。読み取り専用なので、設定はできません。このプロパティで、ズームが操作できれば、どれだけ楽かしれません。

 しかし、オブジェクトのfontSize、width等を、window.devicePixelRatioで割ってあげると、疑似的にオブジェクトはズーム100%で表示した状態に保てます。

-- 
<script>

$ratio = window.devicePixelRatio;

// フォントサイズ
document.body.style.fontSize = 12/$ratio+"pt";

// イメージ幅
$length = document.images.length;
for($i=0; $i < $length; $i++){
  $obj = document.images[$i];
  $obj.style.width = "";  // 現styleを消して、classのstyleにリセット。
  $w = parseFloat(window.getComputedStyle($obj).width);
  $obj.style.width = $w/$ratio+"px";
}

</script>
--

 文字列を数値に変換するなど計算値において、parseInt()整数ではなく、parseFloat()浮動小数点数を利用します。parseInt()整数では、ずれが生じます。

 問題は、オブジェクトにmargin、border、paddingの設定がしてあると、これらすべてに対しても、同様な操作が必要ということです。結構面倒ですね。

 子猫の手を、この方式で改修を進めています。アイコンや項目名はズーム100%のままにして、入力フィールドはズームに合わせて表示します。ズーム150%まで対応します。ズーム175%以上では、デバイス幅1366pxで表示しきれないためです。アラート表示して、ズーム150%以下で表示するように促します。


P.S. 自分自身も老眼が進み、現バージョンの子猫の手では、ズーム150%で作業しています。次期バージョンで、ズーム150%に対応したのは、自分の為でもあります。


P.S.2 変数名の1文字目に$は要らないとのご指摘ありがとうございます。承知しておりますが、下記の理由で変数に$を付けております。

(1) 変数が一目瞭然。
(2) 命名法則を気にしなくてよい。
・半角文字
・英数字[a~z A~Z 0~9]、アンダースコア[_]、ドル記号[$]を使用。
・1文字目には数字は使用不可。
・予約語ではない。

 ちなみに、関数名の1文字目には_を使用しています。変数名と同様な理由です。

function _name(){}

 プログラムを始めたての若いプログラマーの方々には、変数の先頭に$を付けるのに違和感があると思います。昔やPHPでは、変数の先頭に$を付けるルールがあり、トドロはこれが身に沁みついているので、$無し変数では、こんがらがってようできません。ガレコレのプログラミングを参考にされる場合、各自に都合の良い変数名および関数名に変更してみて下さい。これからも、よろしくお願いします。
 
お問い合わせ


by Network Communication Note