[解決済み] ブラウザで400px以下の拡大縮小ができない?
質問
リキッドスタイルシートの作成に取り組んでおり、素晴らしい出来栄えです。ひとつ気になったのは、Chromeではブラウザのウィンドウが400px以下にリサイズされず、そこで止まってしまいます。FFでは、縮小すると400pxあたりで止まり、水平スクロールバーが表示されます。
携帯電話でサイトを開くと、320pxで完璧に見えるので、400pxより小さいサイズで表示されていることがわかります。
これはブラウザやデスクトップの問題なのか、それとも私のCSS以外のものを見るべきなのか、誰か知っている人がいたら教えてほしいのです。私は最小幅の宣言を持っていないので、私はこれを引き起こす可能性があるのか分からない。
デスクトップでは最小幅400px程度に縮小して止まっているのですが、スマホで開くとスマホの画面サイズである320px程度に縮小されてしまいます...少なくともデスクトップの320pxに縮小されないのはなぜなのか不思議です。
-編集 また、これは重要かどうかわかりませんが、Operaではほとんど何もない状態まで縮小することができます...。だから、Operaで動作して、ChromeやFFでは動作しない...何かアイデアはありますか?
解決方法は?
Chrome で横方向のサイズを 400px (OS X) または 218px (Windows) 以下に変更できない。 が、実に簡単な解決策があるのです。
- Web インスペクタを右側にドッキングさせる 下ではなく
- インスペクターパネルのサイズを変更する - ブラウザの領域を本当に小さくすることができます (0pxまで)
更新しました。 Chromeでは、インスペクターウィンドウを右にドッキングしたときに、縦に並べることができるようになりました! これにより、レイアウトがとても良くなりました。
HTMLとCSSのパネルがとてもよくフィットし、小さなコンソールパネルも開くことができます。 これによって、私はFirefox/FirebugからChromeに完全に移行することができました。
もう一歩踏み込みたい場合は ウェブインスペクタの設定 (右下の歯車のアイコン) をクリックし、その下にある ユーザーエージェント タブをクリックします。ここで画面の解像度を好きなように設定でき、縦長と横長を素早く切り替えることもできます。
アップデイト : もう一つ、とてもクールなツールを紹介します。 http://lab.maltewassermann.com/viewport-resizer/
関連
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み] <fieldset> のサイズが変更される; 削除不可能な `min-width: min-content` があるように見える
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
document.forms 使用方法
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] Chromeデベロッパーツールの位置を変更する方法