ガレコレ
Garage Collection
Garage Collection
［トップページ］
2024年11月26日(火)
[iMac] Safariブラウザで vw vh vmin vmax に致命的な欠陥 #HTML5&CSS3&JavaScript
[iMac] Safariブラウザで vw vh vmin vmax に致命的な欠陥 #HTML5&CSS3&JavaScript
iMac の Safariブラウザにおいて、CSS の viewport の長さの単位である vw vh vmin vmax に、致命的な欠陥があることを発見しました。１週間、悩んだあげく、断定しました。
近年のApple製品の出来の悪さにはうんざりしており、Appleに直接問い合わせても、改善してくれません。他のメーカーよりはマシと考えて、工夫したり、妥協したり、我慢したり、その機能を捨てたりしています。
iPhone および iPad の Safari、iMac の Google Chrome では、vw vh vmin vmax は、正常に機能しています。
ブラウザには、Webページの拡大縮小の機能があります。
--
【iMacパソコン】
ショートカットキー
［⌘］＋［＋］で拡大
［⌘］＋［ー］で縮小
［⌘］＋［０］で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
--
近年のApple製品の出来の悪さにはうんざりしており、Appleに直接問い合わせても、改善してくれません。他のメーカーよりはマシと考えて、工夫したり、妥協したり、我慢したり、その機能を捨てたりしています。
iPhone および iPad の Safari、iMac の Google Chrome では、vw vh vmin vmax は、正常に機能しています。
ブラウザには、Webページの拡大縮小の機能があります。
--
【iMacパソコン】
ショートカットキー
［⌘］＋［＋］で拡大
［⌘］＋［ー］で縮小
［⌘］＋［０］で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