JavaScriptでブラウザのフォントサイズを検出する方法
2006年09月13日-
スポンサード リンク
A List Apart: Articles: Text-Resize Detection
ブラウザの各々のフォントのサイズって検出できないと思っていましたが、JavaScriptを使うことでそれが可能です。
これにより、次のことが可能になります。
・ フォントサイズに合わせたデザイン調整
・ アクセスログに新たなデータを追加(利用者はどのぐらいのサイズで自分のページを見ているか?)
大まかな手順としては次の流れになります。
1. hiddenなspanタグを作成し、その中に半角スペースを入れる
2. spanタグのoffsetHeightを取得
3. setIntervalで定期的にoffsetHeightを監視(変更時にデザイン調節等なんらかの処理を行う)
フォントサイズ検出のデモページ
出来ないと思っていたことも、こういったちょっとしたテクニックで出来てしまうことが結構あるみたいですね。
関連エントリ
CSS&JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析
When you design for the web, you don’t know what software people will use to experience your site, and you don’t know what capabilities your users (and their software) have.CSSとJavaScriptでブラウザのフォントサイズを検出する方法。
ブラウザの各々のフォントのサイズって検出できないと思っていましたが、JavaScriptを使うことでそれが可能です。
これにより、次のことが可能になります。
・ フォントサイズに合わせたデザイン調整
・ アクセスログに新たなデータを追加(利用者はどのぐらいのサイズで自分のページを見ているか?)
大まかな手順としては次の流れになります。
1. hiddenなspanタグを作成し、その中に半角スペースを入れる
2. spanタグのoffsetHeightを取得
3. setIntervalで定期的にoffsetHeightを監視(変更時にデザイン調節等なんらかの処理を行う)
フォントサイズ検出のデモページ
出来ないと思っていたことも、こういったちょっとしたテクニックで出来てしまうことが結構あるみたいですね。
関連エントリ
CSS&JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析
関連の記事検索:JavaScript, チュートリアル
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 属性に値を設定するだけでパララックスアニメーションさせられる「Scroll Btween」
- スクロールで要素が迫ってくるようなエフェクトを作る「PushIn.js」
- 総数3.2万個のアイコンライブラリまとめサイト「Iconer」
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 色のカスタマイズやブレンドをできるオンラインツール「hue.tools」
- JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」
- ダークモードにも対応したシンプルなページ作成に使える「Simple.css」
- 過去のエントリ