Webブラウザのリサイズ ICT Tips

Google AnalyticsでWebアクセス解析

Google Analytics Webアクセス解析ブラウザ Webサイトのアクセス解析を Google Analyticsでやってると、iPhone, iPad, Androidなどからのアクセスが増え、（それ以前にも MACからのアクセスなどもありありですが）「ユーザーから Webサイトがどのように見えているか」を確認した方がいいよねっというお話しになりました。まずは様々なWebブラウザで試してみまして・・・Internet Explorer、Google Chrome、Mozilla Firefox、Safari、Operaっと代表的な Webブラウザで確認。それにしても Webブラウザの種類も増えましたよね。確認が大変。まぁそれはさておき、Analyticsで [ユーザー] - [PC 環境] - [画面の解像度]を見るとまぁたくさんの種類がここにも...画面の解像度バリエーションもテストしておくべきですね。

Webブラウザのリサイズ

そぉいえば・・・「JavaScriptで Webブラウザのサイズを変更する方法ってあったよね？」っと思いだして色々と調べてみました。古いWebブラウザでは、windowオブジェクトのinnerWidth、innerHeightプロパティで Webブラウザ内部のサイズが取得・設定できたのですが Internet Explorer 8/9以降ではプロパティ値が undefined になってしまいブラウザのサイズが変更できません。同様に、windowオブジェクトのouterWidth、outerHeightプロパティで Webブラウザ全体のサイズが取得・設定できたのですがこちらも undefinedに...あらら。

でも大丈夫。windowオブジェクトには resizeByメソッドで相対サイズリサイズ、resizeToメソッドで絶対サイズリサイズができます。これは IE8/9以降でも大丈夫っぽい。先ほどの画面解像度のTOP3をお試しすると...

<html> <head><title>ブラウザリサイズ</title></head> <body> <a href="#" onclick="window.resizeTo(1280,800)">1280x 800 Resize</a> <a href="#" onclick="window.resizeTo(1024,768)">1024x 768 Resize</a> <a href="#" onclick="window.resizeTo(1280,1024)">1280x1024 Resize</a> </body> </html>
単純な HTMLであればいけるのですが、今風のスタイル(css)が複雑に絡み合うものだと自身のリサイズは NGなパターンもありますね。そんなときは新規Windowsオープンで。

<html> <head><title>ブラウザリサイズ</title></head> <body> <a href="#" onclick="window.open('test.html', 'Sample', 'resizeable=yes,scrollbars=yes,width=1280,height=800')">1280x 800 Open</a> <a href="#" onclick="window.open('test.html', 'Sample', 'resizeable=yes,scrollbars=yes,width=1024,height=768')">1024x 768 Open</a> <a href="#" onclick="window.open('test.html', 'Sample', 'resizeable=yes,scrollbars=yes,width=1280,height=1024')">1280x 1024 Open</a> </body> </html>