Androidの端末設定にかかわらず、フォントサイズを固定したい。

【開発環境】
Monaca+OnsenUi+jQuery

【実現したいこと】
端末のフォントサイズの設定にかかわらず、アプリ内のフォントサイズを固定にしたい。

【状況】
Android端末で
［設定］→［ユーザー補助］→［フォントサイズ]
のフォントサイズを変更すると画面で表示されるフォントが変更されてしまう。
結果、画面が崩れてしまう。
フォントサイズごとに画面を作成するのはデザインや確認を考えると現実的ではないと判断。

例）
cssで10pxを指定している文字を
フォントサイズ：標準の状態で表示すると10pxで表示されるが。
フォントサイズ：最大の状態で表示すると13pxで表示される。
（値は手元の端末で実施した場合、倍率や設定数などは端末によって異なるようです。）

該当のソースコード

css
1.fontTest{
2    font-size: 10px;
3}

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    function fontView(){
17      alert('現在のフォントサイズ:' + $('.fontTest').css('font-size'));
18    }
19  </script>
20</head>
21<body>
22  <div class="fontTest">
23    フォントサイズ
24  </div>
25  <button type="button" onclick="fontView()" style="font-size:20px">
26    フォントサイズ表示
27  </button>
28
29  <script>
30    alert('変更前のフォントサイズ:' + $('.fontTest').css('font-size'));
31    $('.fontTest').css('font-size',"20px");
32  </script>
33
34</body>
35</html>

試したこと

１．フォントサイズの指定をpx指定からvwや%に変更。
→指定したvwや%をもとに拡大された。
この際に、画面サイズが変更されているか確認したが、変更されていなかった。

２．画面描画前にフォントサイズをcssを書き換えて変更。
→記載したソースがこれになります。
書き換えたフォントサイズをもとに拡大されている？

行動規範の内容に同意します

回答3件

Androidの端末設定にかかわらず、フォントサイズを固定したい。

不可能と思って下さい。
フォントサイズ固定は過去に一部のブラウザ限定で可能でしたが、アクセシビリティの観点から固定出来ないように修正された経緯があります。
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

Re: oyoyo さん

投稿2019/03/14 10:40

think49

総合スコア18196

oyoyo

2019/03/18 01:24

これはHTML、CSSの仕様としてブラウザの拡大率を上げたときに、フォントサイズも拡大されるという理解であっていますか？であれば、逆説的にブラウザの拡大率を固定できればフォントサイズを固定できる可能性がありそうですね。

think49

2019/03/18 03:45

違います。視力の低い方の為にフォントサイズを固定すべきではなく、ユーザが自由にフォントサイズを指定出来るべき、ということです。そして、ブラウザはWeb制作者が任意のフォントサイズに固定することが出来ないように制約を与えています。最小のフォントサイズ、ユーザCSS等、ブラウザ利用者が任意のフォントサイズに出来る仕組みが用意されています。

行動規範の内容に同意します