Webブラウザのリサイズ
Webサイトのアクセス解析を Google Analyticsでおこない、WebサイトにアクセスしているユーザーのWebブラウザと画面サイズを分析。ユーザーにどのように見えているか、Webブラウザをリサイズして確認するというお話し。
Webサイトのアクセス解析を Google Analyticsでやってると、iPhone, iPad, Androidなどからのアクセスが増え、(それ以前にも MACからのアクセスなどもありありですが)「ユーザーから Webサイトが どのように見えているか」を確認した方がいいよね っというお話しになりました。まずは 様々なWebブラウザで試してみまして・・・Internet Explorer、Google Chrome、Mozilla Firefox、Safari、Operaっと代表的な Webブラウザで 確認。それにしても Webブラウザの種類も増えましたよね。確認が大変。まぁそれは さておき、Analyticsで [ユーザー] - [PC 環境] - [画面の解像度]を見ると まぁ たくさんの種類がここにも...画面の解像度バリエーションもテストしておくべきですね。
そぉいえば・・・「JavaScriptで Webブラウザのサイズを変更する方法ってあったよね?」っと思いだして 色々と調べてみました。古いWebブラウザでは、windowオブジェクトのinnerWidth、innerHeightプロパティで Webブラウザ内部のサイズが取得・設定できたのですが Internet Explorer 8/9以降では プロパティ値が undefined になってしまい ブラウザのサイズが変更できません。同様に、windowオブジェクトのouterWidth、outerHeightプロパティで Webブラウザ全体のサイズが取得・設定できたのですが こちらも undefinedに...あらら。
でも大丈夫。windowオブジェクトには resizeByメソッドで 相対サイズリサイズ、resizeToメソッドで絶対サイズリサイズができます。これは IE8/9以降でも大丈夫っぽい。先ほどの画面解像度のTOP3をお試しすると...
単純な HTMLであれば いけるのですが、今風のスタイル(css)が 複雑に絡み合うものだと 自身のリサイズは NGなパターンもありますね。そんなときは 新規Windowsオープンで。