☰

ブラウザが許可する最小幅よりも狭くする方法はありますか?

tag-icon • tag-icon windows-10 google-chrome firefox
ブラウザが許可する最小幅よりも狭くする方法はありますか?

オペレーティング システム: Windows 10
画面解像度: 1366x768

Google Chromeブラウザの幅をさらに小さくしようとしていますが、左と右のこの量より下側に引っ張ることができませんFirefox。このブロックを削除して、それ以上小さくする方法はありますか?

注: 私の問題はモニターの画面スペースにあるため、ブラウザのスペースをもう少し縮小できるようにする必要がありました。

アイデアは、ブラウザ間のこの黒いスペースを増やし、最小値をブロックすることなく幅を調整する自由度を高めることです。

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

答え1

JavaScript から幅の狭い調整可能なブラウザ ウィンドウを起動すると、Chrome と Firefox の両方で縮小されたウィンドウが開くことがあります。

使用できる HTML ページは次のとおりです。

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

これにより、「開く!」というリンクを含むシンプルなページが表示されます。リンクをクリックすると、通常のブラウザ ページよりもサイズを変更できる新しいブラウザ ウィンドウが開きます。

私の実験では、Firefox の幅を約 290 ピクセルに縮小することができました。Chrome では約 200 ピクセルに縮小することができました。

Chromeのもう一つの方法は拡張機能を使うことです OSX リサイザー。

拡張機能のアイコンをクリックすると、現在のページが、176 ピクセルに縮小された新しい調整可能なウィンドウで再度開きます。

Chrome のもう 1 つの方法は、開発者ツールを使用して右側にドッキングすることです。

ドッキングは、開発者ツールを開いて 3 点メニュー アイコンをクリックすることで行われます。

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

開発者ツールが右側にドッキングされたら、中間のセパレーターをドラッグして、左側に表示されるページのサイズを変更できます。

この方法で縮小できた最小値は 150 ピクセルでした。

答え2

スクリーンショットからはブラウザがどれくらい小さいか分かりませんが、私は次のようなツールを使っていますディスプレイフュージョンこれにより、超ワイド モニターをいくつかの仮想画面に分割できるようになりました。これにより、ホット キーを押して Firefox をその小さな画面に移動すると、自動的にサイズが変更されます。これが、画面を小さくする方法だと思います。

私が使っているもう一つのツールはディヴィがトリガーされると、画面がグリッドで表示され、マウスを動かして必要な画面サイズ変更サイズを示すボックスを描画します。これにより、Firefox を非常に小さくすることができます。

下の写真は、超ワイドではなく 27 インチ モニターから撮影されたもので、Firefox ウィンドウがいかに小さいかがわかります。 ここに画像の説明を入力してください

私はこれを試していませんが、理論的には同じはずです。Fancy Zone というアプリが付属する Windows PowerToys をインストールすれば、画面の周囲にゾーンを作成し、SHIFT キーを押してアプリケーションをそのゾーンにドラッグすることで、そのゾーンにアプリケーションをドロップできます。これにより、アプリケーションのサイズは、事前に定義したゾーンのサイズに自動的に変更されます。

答え3

Firefox では、 を使用してuserChrome.css最小幅を上書きできます。

  1. に移動してtrue にabout:config設定します。toolkit.legacyUserProfileCustomizations.stylesheets
  2. ユーザープロファイルを見つけます。フォルダの名前は または のようにする必要があり30t5gfdj.default-releaseます30t5gfdj.default。
  3. ユーザー プロファイル フォルダーに、 という名前のフォルダーを作成しますchrome。 にchrome、 という名前のファイルを作成しますuserChrome.css。したがって、完全なパスは のような形式で終わる必要がありますMozilla/Firefox/Profiles/30t5gfdj.default-release/chrome/userChrome.css。
  4. 入力したらuserChrome.css、ブラウザを再起動して変更を適用します。

userChrome.cssこれが私のファイルの内容です:

@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  min-width: 1px !important;
}

関連情報