One IT Thing

IT業界を楽しむ為の学習系雑記

ionic

ionicアプリ全体のフォントサイズを変更

投稿日:2019年5月11日 更新日:

設定画面でフォントサイズを変更する、こういうのをionicで作ります。
HTML、CSSレベルの概念だけで実現出来ます。

実装

ionicのエレメントはremでサイズ決定している為、大元であるhtmlタグに対してフォントサイズ設定すれば子要素は全て自動で従ってくれます。

環境

  • ionic3、angular4.4
  • node.js8.11.1
  • Android7、iOS12

画面HTML

ion-rangeでサイズ変更するUIにしています。
変更するごとにts側のfontSizeプロパティに値が入ります。

<ion-header>
    <ion-navbar color="dark">
        <ion-title>
            {{ 'configPageTitle' | translate }}
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
        <ion-list-header>
            {{ 'fontSize' | translate }}
        </ion-list-header>
        <ion-item>
            <ion-range min="5" max="8" step="0.1" snaps="true" [(ngModel)]="fontSize" (ionChange)="changeFontSize()">
                <ion-label range-left class="small-text">A</ion-label>
                <ion-label range-right>A</ion-label>
            </ion-range>
        </ion-item>
        <ion-list-header>
            {{ 'langSetTitle' | translate }}
        </ion-list-header>
        <ion-item>
            <ion-select [(ngModel)]="currentLang" [selectOptions]="{ title: 'langSetTitle' | translate }" (ionChange)="changeLang()">
                <ion-option *ngFor="let availableLang of availableLangs" value="{{ availableLang.id }}">{{ availableLang.name }}</ion-option>
            </ion-select>
        </ion-item>

    </ion-list>
</ion-content>

ロジック側TypeScript

htmlタグのfontSizeをion-rangeで変更した値で設定してあげます。

1remがデフォルトなので0.8remになると小さくなり、body以下の子孫エレメントも相対的に小さくなってくれます。

@Component({
    selector: 'page-config',
    templateUrl: 'config.html'
})
export class ConfigPage {
    // ion-rangeの値を保持
    fontSize: number;

    // ion-range変更時イベントハンドラ
    public changeFontSize() {
        let htmlElement = window.document.querySelector("html");
        htmlElement.style.fontSize = fontSize / 10 + "rem";
    }

(snip)

HTMLアプローチでOK

Javascriptで全エレメントを取ってきてフォントサイズを設定して・・・とか考えちゃいますが、htmlレイアウトのアプローチで簡単に達成出来ます。

後はlocalStorageにでも保存しておき、起動時にフォントサイズを設定してやれば大丈夫です。 htmlノードだけ意識すれば良いのでシンプル。

ただし自作コンポーネントのサイズをpx単位で設定してしまっている場合、remの効果が働かず、サイズが変更されないところは要留意。

-ionic
-, , ,

執筆者:

関連記事

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか? 目次1 事象2 原因3 対処 事象 ionic3(SPA)でWorkboxを使ったServiceWorker …

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

History APIを使ってIonic(3以前のSPA)でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

Ionic2や3ではまだAngular Routerを採用していなかったので、ページ遷移をしてもブラウザ履歴が積まれず、Androidのバックキーやブラウザの戻るボタンを押すとサイトに入ってくる前のペ …

ionic-cli 5からcordovaを使ったハイブリッドアプリプロジェクトの作成方法が変わった

久しぶりにハイブリッドアプリを作ろう、ついでにionicとcordovaも最新にしよう。と作業を開始したら今までの手順と違って若干困惑した話です。 プロジェクト新規作成時にcordovaを使うか聞かれ …

ionicアプリを多言語化する

目次1 目的2 環境3 手順1.インストール4 手順2.src/assets/i18nに翻訳ファイルを作成する5 手順3.app.module.tsにngx-translate関連のモジュールを登録す …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。