【jQuery】デバイスの横幅に合わせて文字サイズを自動的に変更する方法

JavaScript

2022.08.01 2022.07.28

この記事は約2分で読めます。

Vuejsでwebサイトを作っていたのですが、デザインのためスマホとPCで表示される文字の大きさを変えたいと思ったのですが、vueだと難しそうだったのでjQueryを使ってサイトの文字サイズを画面の幅に合わせて変更しました。その際の方法を今後のためにメモしておきます。

サイトの文字サイズを画面の幅に合わせて変更するサンプルコード

<html style="font-size: 12px">

テスト

</html>

<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>

<script>

$(window).on('load resize', function(){
    var winW = $(window).width();
    var devW = 800;
    if (winW <= devW) {
        //800px以下の時の処理
        $('html').css('font-size', '50%');
    } else {
        //800pxより大きい時の処理
        $('html').css('font-size', '120%');
}

</script>

参考：https://yuntu-tek.com/font-size-change/

参考：https://ryu-ya.jp/webdesign/javascript/conditional-branching-jquery/