】モバイルで、エディタ(rich text editorを利用中)をクリックし文字を入力しようとした時に、デバイス画面自体がクローズアップ(ズーム)されてしまいます。これを、回避するにはどうしたらいいと思いますか?(おそらくエディタのフォントサイズを16pxなどに設定できれば解消できる気がするのですが、エディタ自体のフォントサイズ設定がわからず。。)
回答者
BubbleのPlugin「rich text editor」を試した、と言う認識のもの回答します。
結論から言うと「エディタ自体のフォントサイズはPlugin側で変更を許可されてないが、Bubbleが表示される時に生成されるHTMLタグを直接変更することでフォントサイズの変更が可能」です。
詳しくみていきます。(HTML, CSSの知識が必要です。)
「rich text editor」を置いて更にブラウザについてる「要素の検証」をすると「div class=bubble-element」のなかに「div id=rich-text-editor-(数字)」があるのが分かります。
これはエディタの数が増えれば増えるほどあとの数字が変更されることが予想されるのでBubbleのエディタ側で次のような設定をします。
「Designタブ → elements → HTML」を右側にドラッグ & ドロップ
「This element is visible on page load (ページ読み込み時に表示する)」のチェックを外し、中のボックスに次のCSSを入力
後は「16px」の部分を変えると好きなようにフォントサイズの変更ができます。
また何かあればご質問お待ちしてます!
P.S.
ちなみに僕の手元の環境ではエディタ入力時にズームアップされることがなかったです。ページ内すべての要素がレスポンシブであればそのような現象は起きないのかな、と勝手な推測を立てています。
質問者
ありがとうございます!
結論から言いますと「iOS appearance の Prevent the user from zooming にチェック」することで、ズームされない設定にすることができました。そしてアドバイスいただいた内容も他方で応用が効くアプローチで大変勉強になり、ありがとうございました!