ブラウザは400px未満にスケーリングしませんか？
私はリキッドスタイルシートの作成に取り組んでいますが、それは素晴らしい動作をします。私が気づいたことの1つは、Chromeのブラウザウィンドウのサイズが400px未満にならないことと、FFで縮小すると400px付近で停止し、水平スクロールバーがポップされることです。 。
携帯電話でサイトを開くと、320px前後で完璧に見えるので、400pxよりも小さいスケールであることはわかっています。
これがブラウザ/デスクトップのものであるかどうか、またはCSS以外のものを見る必要があるかどうかを誰かが知っている場合、私は興味がありました。私は最小幅の宣言を持っていないので、これが何を引き起こしているのか分かりません。
再びデスクトップでは最小幅約400ピクセルに縮小して停止しますが、携帯電話で開くと約320ピクセルの電話画面のサイズに拡大します。デスクトップで320ピクセルに縮小しないでください。
-edit-また、これが重要かどうかはわかりませんが、Operaを使用すると、ほとんど何も縮小できません。したがって、OperaまたはFFではなくChromeで機能します。 .. 何か案は？
Chromeは水平に400px（OS X）または218px（Windows）以下にサイズ変更できませんが、私は問題の本当に簡単な解決策があります：
- ウェブインスペクタを下部ではなく右側にドッキングします
- インスペクタパネルのサイズを変更します-ブラウザエリアを非常に小さくすることができます（0pxまで）
Update：Chromeで、右側にドッキングしたときにインスペクターウィンドウを垂直に配置できるようになりました。これにより、レイアウトが本当に改善されます。
HTMLおよびCSSパネルは非常によくフィットし、小さなコンソールパネルも開きます。これにより、Firefox/FirebugからChromeに完全に移行できました。
さらにステップを進めたい場合は、ウェブインスペクターの設定（歯車アイコン、右下）を見て、ユーザーエージェントタブ。ここで画面解像度を好きなように設定でき、ポートレートとランドスケープをすばやく切り替えることもできます。
UPDATE：これは私が出会ったもう一つの本当にクールなツールです。 http://lab.maltewassermann.com/viewport-resizer/
これは、ブラウザにインストールしたアドオンが原因である可能性があります。ツールバーからすべてのアドオンアイコンを削除または非表示にして、サイズを変更してください。アドオンブラウザがある場合は、アドレスバーのサイズを変更するだけで、アドオンが表示されたままになります。
更新：2013年7月14日
最新のchromeバージョンでは、アドレスバーのサイズを変更でき、アドオンが自動的に非表示になります。
私も困惑しましたが、簡単な解決策になりました。新しいウィンドウを開くためのリンクを含むHTMLファイルを作成しました。
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
この新しいウィンドウにはアドレスバーしかありません。Chromeを使用すると、このサイズを111x80に自由に変更できます。
nayan9のソリューションは優れた機能を発揮し、htmlファイルを作成しなくてもブックマークに追加できます。 Chromeで、URLを使用して新しいブックマークを作成します。
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
また、「小さなウィンドウを開く」などの名前を付けます。これにより、クロム内のサイズ制限なしでウィンドウを簡単に開くことができます。これをアドレスバーにコピーするだけでは機能しないことに注意してください。chromeは「javascript：」を取り除きます。
さまざまなデバイスをエミュレートするために画面の幅を縮小したい場合（および他にこれを行う理由は何ですか？）：
Chromeのインスペクターにエミュレーションセクションがあり、上部のメニューバー（虫眼鏡と要素の間）にある小さな電話アイコンをクリックするとアクティブになります。
エミュレーションモードでは、タッチ、ジオロケーション、さらに加速度計入力のエミュレートなど、他のニース機能の中でも特に、ビューポートサイズをすべての一般的なモバイル画面サイズに設定できます。
Nayan9とdrinkdecafが言ったことに加えて、window.openの呼び出しにdocument.URLをスローするだけで、320ウィンドウで現在表示しているページを見ることができます。スクロールバーが必要な場合は、幅をさらに追加することをお勧めします。
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
私は怠laです、それをさらに簡単にするために、ブックマークレットがユーザーにサイズを尋ねるようにします:-D
javascript: (function() {var width = Prompt('Enter window width:', '320');var height = Prompt('Enter window height:','480');var url = Prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
chromeの右上隅にあるアドオンのアイコンが問題の原因です
->アドレスバー（URLを入力する場所）のサイズを最大幅に変更します（右端のバーを右にドラッグします）
またはアイコンを無効にします
このための簡単な回避策を見つけました。
Responsive Web Design Add-onをChromeにインストールするだけで、アドレスバーとタブのない別のウィンドウが開き、10ピクセル以下に縮小できます。
別の簡単な解決策は、Strg + Shift + Nをクリックしてシークレットモードを開始することです。そこで、ブラウザウィンドウのサイズを自由に変更できます。
このツールは、モバイルサイズに合わせてすばやく切り替えることができ、ポートレート/水平を簡単に切り替えることができるため、このツールが気に入っています。また、パーソナライズされたブックマークレットを作成できるため、不明瞭な解像度を頻繁にデザインする場合は、それらを保存して使用できます。
これらのツールのいずれかを使用する必要がありました。上記の回答を使用しても、ウィンドウを適切に320に拡大できなかったため、このツールは全体的に高速なソリューションのようです。
私は常に固定タブでこの問題に直面しています。 Chromeは、8つの表示されている固定タブがある場合、それらの水平幅よりも小さいサイズに変更されません！これを解決するには、サイズを変更したいタブを外してください...
ChromeのDevToolsは、これらの回答のほとんどが投稿されたときから大幅に移行しました。この問題に対処する最善の方法は、Chromeに組み込まれているエミュレーターを使用することです。
エミュレータを使用するには、DevTools（F12を押します）をクリックし、次のアイコンをクリックしてDevice Toolbarを切り替えます。
これにより、どのモバイルデバイスまたはビューポートサイズでもエミュレートできます。