1. ホーム
  2. html

[解決済み] ブラウザで400px以下の拡大縮小ができない?

2022-04-30 18:36:59

質問

リキッドスタイルシートの作成に取り組んでおり、素晴らしい出来栄えです。ひとつ気になったのは、Chromeではブラウザのウィンドウが400px以下にリサイズされず、そこで止まってしまいます。FFでは、縮小すると400pxあたりで止まり、水平スクロールバーが表示されます。

携帯電話でサイトを開くと、320pxで完璧に見えるので、400pxより小さいサイズで表示されていることがわかります。

これはブラウザやデスクトップの問題なのか、それとも私のCSS以外のものを見るべきなのか、誰か知っている人がいたら教えてほしいのです。私は最小幅の宣言を持っていないので、私はこれを引き起こす可能性があるのか分からない。

デスクトップでは最小幅400px程度に縮小して止まっているのですが、スマホで開くとスマホの画面サイズである320px程度に縮小されてしまいます...少なくともデスクトップの320pxに縮小されないのはなぜなのか不思議です。

-編集 また、これは重要かどうかわかりませんが、Operaではほとんど何もない状態まで縮小することができます...。だから、Operaで動作して、ChromeやFFでは動作しない...何かアイデアはありますか?

解決方法は?

Chrome で横方向のサイズを 400px (OS X) または 218px (Windows) 以下に変更できない。 が、実に簡単な解決策があるのです。

  1. Web インスペクタを右側にドッキングさせる 下ではなく
  2. インスペクターパネルのサイズを変更する - ブラウザの領域を本当に小さくすることができます (0pxまで)

更新しました。 Chromeでは、インスペクターウィンドウを右にドッキングしたときに、縦に並べることができるようになりました! これにより、レイアウトがとても良くなりました。

HTMLとCSSのパネルがとてもよくフィットし、小さなコンソールパネルも開くことができます。 これによって、私はFirefox/FirebugからChromeに完全に移行することができました。

もう一歩踏み込みたい場合は ウェブインスペクタの設定 (右下の歯車のアイコン) をクリックし、その下にある ユーザーエージェント タブをクリックします。ここで画面の解像度を好きなように設定でき、縦長と横長を素早く切り替えることもできます。

アップデイト : もう一つ、とてもクールなツールを紹介します。 http://lab.maltewassermann.com/viewport-resizer/