ブラウザは400px未満に拡大縮小しませんか？

私は流動的なスタイルシートを組み立てる作業をしていて、それは素晴らしい働きをします。私が気づいたことの1つは、Chromeのブラウザウィンドウが400px未満にサイズ変更されず、そのままスタックし、FFで縮小すると、約400pxで停止して水平スクロールバーがポップアップすることです。

私の携帯電話でサイトを開くと、320px前後で完璧に見えるので、400px未満のスケールになることはわかっています。

これがブラウザ/デスクトップのことなのか、CSS以外のものを見る必要があるのか​​を誰かが知っているのかどうか知りたいと思いました。min-width宣言がないので、何が原因かわかりません。

再びデスクトップでは、それは約400pxの最小幅に縮小して停止しますが、私の電話でそれを開くと、それは約320pxの電話画面のサイズに拡大縮小します...デスクトップでは320pxに縮小しません。

-edit-また、これが問題かどうかはわかりませんが、Operaではほとんど何にも縮小できません...したがって、ChromeやFFではなく、Operaで動作します...アイデアはありますか？

Chromeは水平方向に400px（OS X）または218px（Windows）以下にサイズ変更できませんが、問題に対する非常に簡単な解決策があります。

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

更新： Chromeでは、右側にドッキングしたときにインスペクターウィンドウを垂直に配置できるようになりました。これは本当にレイアウトを改善します。

HTMLおよびCSSパネルは非常によく適合し、小さなコンソールパネルを開くこともできます。これにより、Firefox / FirebugからChromeに完全に移行できました。

ステップに進みたい場合は、Webインスペクターの設定（歯車アイコン、右下）を確認し、ユーザーエージェントタブに移動します。画面の解像度をここで好きなように設定でき、縦長と横長をすばやく切り替えることもできます。

更新：これは私が出会ったもう1つの本当にクールなツールです。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の発言に加えて、document.URLをwindow.openの呼び出しにスローするだけで、現在320ウィンドウで表示しているページを確認できます。スクロールバーが必要な場合は、幅を少し増やしたい場合があります。

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

ChromeのDevToolsは、これらの回答のほとんどが投稿されたときから大幅に移行しています。この問題に対処する最善の方法は、Chromeに組み込まれているエミュレータを使用することです。

エミュレータを使用するには、DevToolsを開き（を押すF12）、次のアイコンをクリックしてを切り替えますDevice Toolbar。

これにより、必要なモバイルデバイスまたはビューポートのサイズをエミュレートできます。

クロムでは、右上隅にあるアドオンのアイコンが問題の原因です

->アドレスバー（URLを入力する場所）のサイズを最大幅に変更します（バーの右端を右にドラッグします）。

またはアイコンを無効にする

私は怠惰です、もっと簡単にするために、ブックマークレットにユーザーにサイズを尋ねさせます:-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にレスポンシブウェブデザインアドオンをインストールするだけで、アドレスバーとタブのない別のウィンドウが開き、10ピクセル以下に縮小できます。

ここにリンク：https : //chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

私は同様の問題を経験しており、良い回避策を見つけました。Chrome開発ツールを開くと、左上に小さな画面とipadアイコンがあります。それをクリックすると、ページのモバイルビューが開きます。事前定義されたデバイスまたはカスタム解像度に設定できます。実際にはかなり気の利いた。

別の簡単な解決策は、Strg + Shift + Nをクリックしてシークレットモードを開始することです。そこで、ブラウザウィンドウのサイズを好きなように変更できます。

このツールが好きなのは、モバイルサイズですばやく切り替えたり、ポートレート/水平を簡単に切り替えたりできるためです。また、パーソナライズされたブックマークを作成できるので、不明瞭な解像度を頻繁に設計する場合は、それらを保存して使用できます。

上記の回答を使用してもウィンドウを320に適切に拡大できなかったため、これらのツールのいずれかを使用する必要がありました。このツールは全体としてより高速なソリューションのようです。

http://lab.maltewassermann.com/viewport-resizer/

私は常にピン留めされたタブでこの問題に遭遇しています。Chromeは、8つの表示される固定されたタブの横幅よりも下にサイズ変更しません。これを解決するためにサイズを変更したいタブを切り離すだけです...

これは、stackoverflowコミュニティへの私の最初の貢献であり、インターネットをこのような強力なツールにした素晴らしい人々全員に還元する私の努力です。さて、safariにこのクールな機能があります。設定でSafari開発者オプションをアクティブにする必要があります。 Safariで設定を行って開発者メニューをアクティブにするスクリーンショット

アクティベートすると、非常に強力な開発者ツールにアクセスできます。このツールの1つは、Webサイトのレスポンシブレイアウトのテストに使用できるビューポート調整です。レスポンシブレイアウトテストをアクティブにするには、ショートカットCmd + ctr + Rを使用して、safariビューのポート調整オプションをアクティブにします。これにより、さまざまなビューポートサイズでWebサイトをテストするための十分な制御が得られます。

レスポンシブレイアウトテストオプションがアクティブ化されたときのブラウザーウィンドウの外観のスクリーンショット。

1. Safariで開発者メニューをアクティブにする方法へのリンク：https : //coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

多くのスマートフォンでは、ズームを使用してページを画面サイズに合わせて拡大縮小しています。最小ページ幅はおそらく400pxです。サンプルコードがなければ、それだけで言えると思います。