2024年12月1日(日)
iMac の Safari における文字サイズ固定 #HTML5&CSS3&JavaScript

　パソコンiMacにおいて、Safari ブラウザの不具合にて、vw vmin 単位による『文字サイズ固定』ができませんでした。

　そこで、Javascriptによるスクリーン倍率の計算で、拡大縮小して、文字サイズ固定を実現しました。

　ガレコレのトップページにて、ご確認下さい。フルスクリーンに合わせておりますが、小さな画面の場合でも、違和感が無い大きさで固定できています。

-- トップページ上部 --
ガレコレ
Garage Collection
--

　また、『フルスクリーン』に関しては、今後も『標準規格』が出される見込みがなく、各ブラウザが『独自規格』で対応しており、iMac では昔のようにはいきませんでした。フルスクリーンの検知は、諦めました。

-- 今の iMac Safari では利用不可 --
alert(document.webkitIsFullScreen);
alert(document.fullscreen);
document.body.requestFullscreen();
--



　この対処の過程で、『スクリーン倍率の計算」の仕様を、ほぼ確立しました。手持ちのiPhone・iPad・iMacで、正常に稼働しています。Windows、Androidについては、追って検証していきます。



　まず、デバイスが大きく分けて３種類（スマホ・タブレット・パソコン）になった今、昔と同じようには計算できません。余白が絡むパラメーターは、使えません。

-- 100％時のピクセル値 --

【iPhone】

　aW: 320（固定値）※
　aH: 693（固定値）

┏━━┓┐
┃　　┃│
┃　　┃│cH: 507　vMAX: 597
┃　　┃│
┠──┨┤
┗━━┛┘余白　　　余白
└──┘
　cW: 320※
　vMIN: 320※

　∴100*aW/cW %
　　100*aW/vMIN %
　○iPhone Chrome

┏━━━┯┓┐
┃　　　│┃│cH: 259　
┠───┼┨┤ 　　　vMIN: 320※
┗━━━┷┛┘余白
└───┴┘
　cW: 596　余白
　vMAX: 597　余白

　∴100*aW/vMIN %
　×iPhone Chrome


【iPad】

　aW: 1024（固定値）※
　aH: 1366（固定値）※

┏━━━━━┓┐
┃　　　　　┃│
┃　　　　　┃│
┃　　　　　┃│cH: 1253
┃　　　　　┃│　　vMAX: 1320
┃　　　　　┃│
┃　　　　　┃│
┠─────┨┤余白　余白
┗━━━━━┛┘
└─────┘
　cW: 1024※
　vMIN: 1024※

　∴100*aW/cW %
　　100*aW/vMIN %


┏━━━━━━━┓┐ 
┃　　　　　　　┃│
┃　　　　　　　┃│cH: 911
┃　　　　　　　┃│　vMIN: 977
┃　　　　　　　┃│
┠───────┨┤余白　余白
┗━━━━━━━┛┘
└───────┘
　cW: 1366※
　vMAX: 1366※

　∴100*aH/cW %
　　100*aH/vMAX %




【iMac】フルスクリーンの場合

　aW: 1280（固定値）※
　aH: 720（固定値）

┏━━━━━━━━┓┐
┃　　　　　　　　┃│
┃　　　　　　　　┃│cH: 640
┃　　　　　　　　┃│ vMIN: 640
┃　　　　　　　　┃│
┃　　　　　　　　┃│
┠────────┨┤余白　余白
┗━━━━━━━━┛┘
└────────┘
　cW: 1280※
　vMAX: 1280※

　∴100*aW/cW %
　　100*aW/vMAX %



aW : screen.availWidth
aH : screen.availHeight

cW : screen.clientWidth
cH : screen.clientHeight

vMIN : Computed of 100vmin
vMAX : Computed of 100vmax
--



　イベント発生の検知は、以前から問題を確認していましたが、未だに改善されていません。

-- 本来ならば、下記のように書く --

window.onresize = 関数名;

if('object' === typeof window.onorientationchange){
  // スマホ・タブレット
  window.onorientationchange = 関数名;
}
--

　実に、window.onresize が曲者です。パソコンでは問題ないのですが、スマホ・タブレットでは、画面の回転時にも、resize イベントが発生しています。それだけではなく、サイズの計算が必要な vw vh vmin vmax を使用していなくても、スクロールするだけで、イベント発生しています。いわゆる『不要なコールバック』です。

　さらに悪いことに、window.onorientationchange が、サイズ変更の確定より先にイベント発生しています。誰が考えても、Safariブラウザが悪すぎます。

！スマホ・タブレット用には、window.onresize を使用しない方が賢明です！

　なお、サンプルページでは、良くないことを承知で、スマホ・タブレットにもresize イベントを検知して、データを更新させています。setTimeout()を使用して、多少回避するプログラムも試してみましたが、あまり効果が感じられませんでした。あしからず。

［スクリーン倍率の計算］
http://neconote.jp/index.php?page=345

　プログラミングが気になる方は、ソースを表示してみて下さい。不用になったソースコードも、コメントアウトして残してあります。ご参考に。