前提・実現したいこと
今時なんですが、サイトに「大」・「中」・「小」のボタンを設置し
フォントサイズを変える処理を入れております。
それをレスポンシブでも対応したいと考えております。
PC閲覧時では「rem」を指定しフォントサイズを変更しているのですが
スマートフォンサイズでは「vw」を指定していきたいのですが「vw」を使うと文字サイズ変更できず悩んでおります。
該当のソースコード
使用しているJavaScriptです
$(function(){ function initFontSize() { var size = (sessionStorage.getItem('fontSize'))? sessionStorage.getItem('fontSize') : '16'; changeFontSize(size); } function changeFontSize(size){ $('html').css('font-size', size + 'px'); $('[data-font!=' + size + ']').removeClass('active'); $('[data-font=' + size + ']').addClass('active'); sessionStorage.setItem('fontSize', size); } function addListeners() { $('[data-font]').on('click', function(){ changeFontSize($(this).data('font')); }); } function init() { initFontSize(); addListeners(); } init(); });
得られた結果
PC閲覧時では(rem指定)思った通りにフォントが大きくなりますが
スマートフォンでは、ボタンを押しても効かない状態です。