ユーザビリティを考慮するとブラウザの拡大率も取得する機会もあります。？本日は「jQueryでブラウザ拡大率を取得する」についてです。
2017-10-24追記：
ブラウザの正確な拡大率取得は基本的にムリらしいです。
ブラウザの拡大率、ズームレベルを取得した。 - Qiita
ですので本記事は「拡大率が100%以上/以下だと思われる状態の判定方法」として参考にしていただければ幸いです。
ブラウザの正確な拡大率取得は基本的にムリらしいです。
ブラウザの拡大率、ズームレベルを取得した。 - Qiita
ですので本記事は「拡大率が100%以上/以下だと思われる状態の判定方法」として参考にしていただければ幸いです。
こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。本日は、「jQueryでブラウザ拡大率を取得する」についてです。
なお、本記事作成にあたりまして以下サイトを参考にさせていただきました。貴重な情報の提供に感謝します。
【jQuery】ウィンドウの解像度を取得してRetinaディスプレイを判別する。 - ONZE
サンプル
弊社で実際に発生したケースです。
とある社内システムの開発でブラウザの横スクロールバーを強制的に非表示にしていたのですが、目の悪いユーザーが拡大率を上げて使用する際には画面が切れて表示されないというご指摘がありました。
その際に以下の様な施策をしました。
|
1 2 3 4 5 6 7 8 9 10 |
//■ブラウザの拡大率が1（100%）以上だったら、ブラウザの横スクロールバーを表示させる $(window).resize( function() { //console.log("window.devicePixelRatio = " + window.devicePixelRatio); if(window.devicePixelRatio > 1){ $("html").css("overflow-x","visible"); } else{ $("html").css("overflow-x","hidden"); } }); |
一応これで問題は解決しました。
が、そもそも「強制的に非表示」なんぞしないで済む作りにすればよかったんですけどね、、、
