Google Chromeのウインドウサイズの幅を縮めるには限界がある。

Google Chromeでサイトを表示していて、ウインドウサイズ（横幅）を縮めていった時の話。
まぁどんなウインドウでも限界はそりゃあるんですけど、Chromeの横幅の限界は結構大きいんですね。
環境によるのですが400ピクセルくらいが最小サイズでそれ以下にはできません。
（僕の環境では373ピクセルが限界でした。なぜ環境によるかは後述）

同じページを表示しているときにFirefoxでウインドウサイズを縮めた場合、280ピクセルくらいの横幅まで縮まりましたので、やはりChromeは最小サイズにしても大きいですね。

ちなみに最初に言っちゃいますけど、解決策はないです。
・・・いや、まぁ身もふたもないけど、Chromeの仕様であり不具合じゃないんで、解決出来るものじゃないんですよね。。。

■幅の限界がある理由

これはどうやらインターフェースが原因なようです。
Chromeのウインドウの上の方には、戻る・進む・更新などのボタン、URLバー、アカウントのアイコン、メニューボタンなどが並んでいます。
この部分の最小サイズが限界として設定されているようです。

「環境によってことなる」と書きましたが、人によっては更新ボタンの横にホームボタンを表示している場合があると思います。
その場合はホームボタンの表示エリアも確保されますので、もっと大きいところで横幅の限界が来ます。

ちなみにアドオンのアイコンは隠れますので、いくつ入っていても影響はないようです。

■httpとhttpsでも異なる

さらに混乱を巻き起こすのが、ページのURLの違い。
「http://」で始まるURLのページにアクセスしている場合と、「https://」でアクセスしている場合で最小の横幅が異なるのです。

具体的には「https://」の方が、より横幅を狭めることができます。
これは「http://」でアクセスしたときにアドレス欄に表示される「保護されていない通信」という表示がないためのようです。
余計なものがない分、より狭めることができるということですね。

「http://」でページを表示している場合は、横幅約470ピクセルくらいが限界で、それより縮小することはできませんでした。

■まとめ

結局のところ、これはChromeの仕様なのでどうしようもないところです。
今回、僕がこれに気づいたのはレスポンシブのWebサイトを作成中に確認していたときでした。
ただ通常のユーザーがそんなにウインドウの幅を縮めることはないと思います。
あっても、通常の利用ではないですね。

またレスポンシブサイトのデザイン確認は、検証ツールを使用したほうが良いです。
単純に幅を狭めるのは楽ですけど、ユーザーエージェントやviewportの関係で、実機との違いが結構出てしまう（実機で見たときにくずれる）原因になります。