html - ブラウザは400px未満に拡大縮小されませんか？

Question

私はリキッドスタイルシートの作成に取り組んでおり、それは素晴らしい働きをします。私が気づいたことの1つは、Chromeのブラウザウィンドウが400ピクセル未満にサイズ変更されないことです。それは、そこに留まり、FFでは、縮小すると約400ピクセルで停止し、水平スクロールバーが表示されます。

携帯電話でサイトを開くと、320ピクセル前後で完璧に見えるので、400ピクセルよりも小さいスケールであることがわかります。

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

再びデスクトップでは、最小幅の約400pxに縮小して停止しますが、電話で開くと、電話画面のサイズである約320pxに拡大されます...少なくともなぜ勝ったのか不思議ですデスクトップでは320pxに縮小しないでください。

-編集-また、これが重要かどうかはわかりませんが、Operaではほとんど何にもスケールダウンできません...したがって、ChromeやFFではなくOperaで動作します...何かアイデアはありますか？

score 269 · Accepted Answer

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

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

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

垂直パネルレイアウト設定

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

垂直パネルレイアウトで右にドッキングされたインスペクター

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

デバイスの解像度設定

更新：これは私が出くわしたもう一つの本当にクールなツールです。http://lab.maltewassermann.com/viewport-resizer/

score 36 · Accepted Answer

これは、ブラウザにインストールしたアドオンが原因である可能性があります。ツールバーからすべてのアドオンアイコンを削除または非表示にして、サイズを変更してみてください。アドオンブラウザがある場合は、アドレスバーのサイズを変更するだけで、アドオンが表示されたままになります。

更新：2013年7月14日

最新のChromeバージョンでは、アドレスバーのサイズを変更できるようになり、アドオンが自動的に非表示になります。

score 24 · Accepted Answer

私も困惑しましたが、簡単な解決策になりました。新しいウィンドウを開くためのリンクを含むHTMLファイルを作成しました。

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

この新しいウィンドウにはアドレスバーしかなく、Chromeではこれを111x80に自由にサイズ変更できます。

score 21 · Accepted Answer

nayan9のソリューションはうまく機能し、htmlファイルを作成しなくてもブックマークに入れることができます。Chromeで、次のURLを使用して新しいブックマークを作成します。

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

そして、それに「OpenSmallWindow」などの名前を付けます。これにより、Chrome内のサイズ制限なしでウィンドウを簡単に開くことができます。これをアドレスバーにコピーするだけでは機能しないことに注意してください。chromeは「javascript：」を削除します。

score 11 · Accepted Answer

さまざまなデバイスをエミュレートするために画面幅を縮小したい場合（そして、なぜ他にこれを実行したいのですか？）：

Chromeのインスペクターにエミュレーションセクションがあり、上部のメニューバー（虫眼鏡と要素の間）にある小さな電話アイコンをクリックするとアクティブになります。

Chromeエミュレーションアイコン

エミュレーションモードでは、タッチ、ジオロケーション、さらには加速度計入力のエミュレートなど、他の優れた機能の中でも、ビューポートサイズをすべての一般的なモバイル画面サイズに設定できます。

ここに画像の説明を入力してください

score 8 · Accepted Answer

nayan9とdrinkdecafが言ったことに加えて、window.openの呼び出しにdocument.URLをスローするだけで、320ウィンドウで現在表示しているページを確認できます。スクロールバーが必要な場合は、幅をさらに追加することをお勧めします。

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

score 5 · Accepted Answer

私は怠け者です、それをさらに簡単にするために、ブックマークレットにユーザーにサイズを尋ねさせてください:-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);})()

score 3 · Accepted Answer

Chromeでは、右上隅にあるアドオンのアイコンが問題を引き起こします

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

これに対する簡単な回避策を見つけました。

レスポンシブウェブデザインアドオンをChromeにインストールするだけで、アドレスバーとタブのない別のウィンドウが開きます。このウィンドウは10ピクセル以下に縮小できます。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

このツールが気に入っているのは、モバイルサイズですばやく切り替えることができ、縦向きと横向きを簡単に切り替えることができるからです。また、パーソナライズされたブックマークレットを作成できるため、あいまいな解像度を頻繁にデザインする場合は、それらを保存して使用できます。

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

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

score 0 · Accepted Answer

私は常に固定されたタブでこの問題に遭遇しています。Chromeは、固定された8つのタブがある場合、水平方向の幅より下にサイズ変更されません。これを解決するには、サイズを変更するタブをデタッチするだけです...

score 0 · Accepted Answer

これはStackOverflowコミュニティへの私の最初の貢献であり、インターネットをこのような強力なツールにした素晴らしい人々に恩返しをするための私の努力です。
今答える：
Safari、このクールな機能があります。環境設定でサファリ開発者オプションを有効にする必要があります。開発者メニューをアクティブ化するためのSafariでの設定のスクリーンショット

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

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

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

score 0 · Accepted Answer

Web開発者の場合、サイズが500pxまたは最小幅未満のモバイルまたはタブレットでWebサイトの応答性をテストするには、開発者ツールを使用して小さな画面でテストします。テストするには、開発者ツールに移動してctrl + shift + Mを押すか、開発者ツール画面の左上にあるデバイスアイコンをクリックして、デバイスモードを切り替えます。デバイスアイコンが青色の場合は、ブラウザウィンドウを変更して、Webサイトの応答性をテストできます。

score -4 · Accepted Answer

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

html - ブラウザは400px未満に拡大縮小されませんか？

17 に答える 17

Related

Reference