今や、ブラウザには、Webページを『英語に翻訳』する機能が標準で備わっています。

　翻訳したくないコンテンツには、下記のように、属性を追加します。

--
<p translate="no">ガレコレ</p>
--

　まだ、この通りに翻訳してほしいとラベルする機能はありません。



　英語に翻訳すると、意図しない変換が行われて、ページレイアウトが崩れる場合があります。巧みにtranslate="no"を使って、一部の文字を日本語のまま表示させることで、回避できます。

--
全角記号や全角空白
　↓英語に翻訳
半角へ変換される。
　↓
レイアウトが崩れる。
--

　なお、文字地図等には、妥協も必要です。
http://neconote.jp/index.php?page=333

　iPhoneのブラウザSafariおよびChromeにおいて、<table></table>内、および、<div></div>の入れ子内で、『文字サイズ』の制御不能を回避できます。下記の設定は、現時点では必須と考えています。

--
<style>
body {
  -webkit-text-size-adjust:100%;
}
</style>
--



P.S. iOSの制約で、iOSのブラウザのレンダリングエンジンは常に『Webkit』を使わなくてはいけません。Chromeのレンダリングエンジンは、本来『Blink』なのですが、iPhoneではChromeも『WebKit』なのです。

　スマホでは、<select>の文字サイズは、CSSで普通にスタイルを設定しても、反映されません。

--
<select style="font-size:12pt;"> 
--



　文字サイズを設定する先に、枠線サイズを設定することで、反映されるようになります。枠線無しで構いません。裏技です。

--
<select style="border:none; font-size:6vmin;"> 
--



　上記の例では、スマホ用に、文字サイズを一定の大きさにしています。

--
⬛︎スマホ短辺360px表示

12pt = 4.44vmin


⬛︎スマホ短辺375px表示

10.5pt = 14px = 3.73vmin

11pt = 14.7px = 3.91vmin

11.5pt = 15.3px = 4.08vmin

12pt = 16px = 4.27vmin


⬛︎スマホ短辺393px表示（iPhone16）

12pt = 4.07vmin

18pt = 6.11vmin


⬛︎スマホ短辺400px表示
※自分は、これが黄金率であり、将来統一されるべきと考えています。

12pt = 16px = 4vmin

18pt = 24px = 6vmin
--



　ガレコレのWebシステムでは、まだデバイスの初期設定で表示させていますが、短辺400px表示を想定しています。現在のスマホでは、短辺375pxが標準ですが、ピクセル数が大きくなる傾向なので、先取りしています。

　なお、スマホとパソコンで、文字サイズを両立させるために、下記のように、CSSを設定しています。

--
<style>

select {
  border-style:none;
}

.size12 {
  font-size:min(12pt,4vmin);
}

.size18 {
  font-size:min(18pt,6vmin);
}

</style>
--



　実際には、文字サイズを明示する必要がない場合、相対で記述しています。

--
class="size18"

style="font-size:1.5em;"
--

　-webkit- は、Vendor Prefixの一種で、WebKitベースのブラウザにおける独自のCSS拡張機能を意味しています。

--
-webkit-
　Safari/Chrome
-ms-
　Microsoft Edge
-moz-
　Firefox
--



　随分前のコードなので、もう標準化されているかなと思って、一旦外してみました。パソコンでは問題ありませんが、iPhoneのSafariとChromeで<table>表内の文字サイズが制御できず、レイアウトがメチャクチャになってしまいました。まだ、必要なのですね。

--
<style>

body {
    -webkit-text-size-adjust:100%;
}

</style>
--



　ガレコレでは、1pxのズレも無いようにレイアウトしています。時にブラウザ側の問題で揃わない場合もありますが、裏技を駆使して何とかしようと拘っています。