ジント兄さんのテストブログ

ジント兄さんがFC2ブログのカスタマイズを練習するために作ったブログです。

カテゴリ別のリンクを探している方、どんな記事があるかをもれなく把握したい方は、記事一覧のページをご覧になってください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

1remが10pxになる犯人は最小フォントサイズだった

CSSの単位vwをいたるところで使ったデザインを試みた。余白やら何やらを、画面の横幅に対する割合で指定することで、横のピクセル数が10000を超えるような時代が到来してもメンテナンスフリーで変わらぬレイアウトを維持できるのだフッフッフ……。

しかし早すぎた。Android 4.3以下で対応していなくて悲惨なことになった。単位vwを使わずに目的を達成できる別の手段は無いかと考えて、JavaScriptの力を借りることにした。JavaScriptでHTML要素のフォントサイズを以下のように設定。また、CSSはテキストエディタにてvwをremに一括置換。これで上手くいくはず……!

function adjustFontSize() {
  var dE = document.documentElement;
  dE.style.fontSize = (dE.clientWidth / 100) + 'px';
}
adjustFontSize();

しかし上手くいかない。太さ1remで指定したボーダーが、太さ10pxになっている。DOMツリー上では<html style="font-size: 4.14px">とかになっているのに。

なんと、動作テストを行っていたGoogle Chromeの最小フォントサイズが10pxだったから、それによる結果だった。(実機でテストしろよって感じですけど。)document.documentElement.clientWidthを100じゃなくてたとえば10で割るとかにすれば、最小フォントサイズの罠に引っかかりにくくなる。しかしそうすると今度はvwを単純にremに置換じゃすまなくなるので、若干面倒くさくなる。

Android 4.3以下が早く絶滅しますように。

コメント

0: ジント兄さん
メッセージをどうぞ。

トラックバック

この記事のトラックバックURL:http://jislotz.blog.fc2.com/tb.php/18-3fa56c39

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。