ガレコレ
Garage Collection
2024年11月26日(火)
[iMac] Safariブラウザで vw vh vmin vmax に致命的な欠陥 #HTML5&CSS3&JavaScript
 iMac の Safariブラウザにおいて、CSS の viewport の長さの単位である vw vh vmin vmax に、致命的な欠陥があることを発見しました。1週間、悩んだあげく、断定しました。

 近年のApple製品の出来の悪さにはうんざりしており、Appleに直接問い合わせても、改善してくれません。他のメーカーよりはマシと考えて、工夫したり、妥協したり、我慢したり、その機能を捨てたりしています。

 iPhone および iPad の Safari、iMac の Google Chrome では、vw vh vmin vmax は、正常に機能しています。



 ブラウザには、Webページの拡大縮小の機能があります。

--
【iMacパソコン】

 ショートカットキー
 [⌘]+[+]で拡大
 [⌘]+[ー]で縮小
 [⌘]+[0]で100%


【iPhone iPad の Safari】

 アドレス入力欄内の左側の[三]アイコンをタップすると、[ぁ あ]が表示されて、これらをタップして、Webページの拡大縮小を行います。
--



 さて、Webページを拡大縮小しても、大きさを変えたくない部分があります。px pt em といった単位では、大きさを固定できません。viewport の長さの単位であり、表示画面に対して率で設定する vw vh vmin vmax を利用すれば、簡単に可能です。

--
ビューポート幅  = 100vw
ビューポート高さ = 100vh
ビューポート短辺 = 100vmin
ビューポート長辺 = 100vmax

※ビューポートとは、表示領域(スクリーン画面)において率で表す仕組みです。
--

 画像<img>・ブロック<div></div>では、どのデバイス、どのブラウザでも、問題なく、大きさを固定できました。

 しかし、文字に関しては、iMac の Safari だけ、文字の大きさを固定できません。いろいろ試しましたが、致命的な欠陥と断定しました。

 Apple社には、もう問い合わせはしません、時間の無駄です。早く、気づいて、修正してもらいたいものです。



P.S. 原因究明の過程で、スタイルに関して、初期設定値ではなく、倍率変更後の現在の値を調べてみました。当然、IE独自のdocument.getElementById("id_name").currentStyle は使えませんでした。window.getComputedStyle($target) が使えました。


-- Javascript --
<script>

$target = document.getElementById("id_name");

alert(window.getComputedStyle($target).fontSize);

</script>
--

 文字サイズを vw vh vmin vmax で記述してあっても、Webページの倍率変更後の実際の文字サイズを計算して、px値でアラート表示してくれます。

 正常なブラウザでは、Webページの拡大縮小に伴って、文字サイズのpx値が適正に変動しました。iMac の Safari だけが、px値に変動がありません。倍率100%以外は、機能していません。

 つまり、これが固定できない原因であり、ブラウザのバグフィックスは非常に簡単なものです。

 viewport が登場したての頃ならいざ知らず、とっくに普及期に入っている今、ありえない欠陥です。



P.S.2 iMac の Safari には、『レスポンシブ・デザイン・モード』という、スマホ画面のシミュレータ(仮想モード)があります。

 設定しないと、ショートカットキーも使えません。

--
iMac の Safariアプリを起動
→[Safari]メニュー
 >[設定] ⌘,
→[詳細]タブ
 >✅ Webデベロッパ用の機能を表示

[開発]メニュー
 >[レスポンシブデザインモードにする] ^⌘R
→800×600 (100%)で表示

⌘ コマンド
⇧ shift
^ control
⌥ option (alt)
--

 この仮想モードでも、文字サイズは固定されませんでした。そもそも拡大縮小を意識した仕様ではなく、使い物になりません。

 この程度の肝心なこともチェックしておらず、独学プログラマーから見ても、Appleのアプリ開発チームの力量を疑います。


P.S.2-2 iMac の Safari でも、[開発]メニューを設定すれば、ソースコードが読めます。

--
[開発]メニュー
 >[ページのソースを表示] ⌥⌘U
--
 
お問い合わせ


by Network Communication Note