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) 変数が一目瞭然。
(2) 命名法則を気にしなくてよい。
・半角文字
・英数字[a～z A～Z 0～9]、アンダースコア[_]、ドル記号[$]を使用。
・１文字目には数字は使用不可。
・予約語ではない。
ちなみに、関数名の１文字目には_を使用しています。変数名と同様な理由です。
function _name(){}
プログラムを始めたての若いプログラマーの方々には、変数の先頭に$を付けるのに違和感があると思います。昔やPHPでは、変数の先頭に$を付けるルールがあり、トドロはこれが身に沁みついているので、$無し変数では、こんがらがってようできません。ガレコレのプログラミングを参考にされる場合、各自に都合の良い変数名および関数名に変更してみて下さい。これからも、よろしくお願いします。
お問い合わせ