より高い解像度の画面をシミュレートするにはどうすればよいですか？[閉まっている]

93

ブラウザが画面よりも高い解像度でWebサイトをテストする方法はありますか？

例：1440 x 900の画面があり、1920 x 1200、1920 x 1080などでWebサイトをテストしたい。

html css resolution

— HappyDeveloper
ソース

@decezeは実際には非常に良い提案です。960.gsなどの重要な点は、ピクセルサイズで作業する場合、デザインはどこでも同じに見え、画面の解像度に基づいて画面の占有面積が異なるためです。継ぎ目が揃っていることを確認するために2とビットの完全な繰り返しを確認できる限り、水平方向に繰り返すグラフィックを高解像度でテストする必要はありません。あるいはセミの原理を使ってもっと面白いものを作ることもできます。

— エンドファージ2011年

1

@Endophage：同意しません。適切に流動的なレイアウトを構築すると、ユーザーのフォントサイズの設定など、多くの場合、より良い結果が得られます。どこでも同じように見ることは必須ではなく、単にピクセルを覗き見るだけです。

— あなた

@あなたはまだフォントサイズを変更する流動的なレイアウトを見ていません。固定ピクセル幅が適切である理由は、人間の目が特定の長さの線をスキャンするのに苦労しているためです（フォントサイズが約12ピクセルで約20ワードであることがわかっています。自分で調べることができます）。電話の解像度を下げることについて話している場合は別の話ですが、デスクトップ/ラップトップの解像度について話している場合、高解像度の大きなお尻の画面でウィンドウのサイズを変更するだけで、効果的にテストしています異なる解像度。

— エンドファージ2011年

1

@Endophage：したがって、幅として40emではなく960px、を使用する必要があります（または同様の測定）。12ピクセルのフォントサイズが小さすぎると判断してCmd- を押すと、ピクセルがスケーリングされません+。その上、私のブラウザウィンドウはそのまま960pxほどです。

— あなた

@実際には、ピクセルはCtrl/Cmd +ズーム関数であるため、ヒットするとピクセルがスケーリングされます。SOで試してみることができます。メインコンテンツセクションの幅は960pxです。40emのようなものを使用しても、画面の解像度に比例しません。emサイズの使用は、オーバーライドされない限り、最上位で最大1em / 16pxまで継承される親要素のフォントサイズに相対的です（そして、申し訳ありませんが、以前のコメントではpxではなく12ptでした）。お読みください：kyleschaeffer.com/best-practices/…–エンドファージ

— 06/21

76

[編集：まずブラウザのdevtoolsを確認してください！@SkylarIttnerがコメントで指摘しているように、以下のソリューションが投稿されて以来、ほとんどのブラウザーでレスポンシブデザインテスト用のツールが公開されています。それらはおそらく現在最も良い/最も簡単なオプションです。]

あなたは、私が間違っている場合は、単にではiframeを作成して私を修正できstyle="desired width & height"とsrc="your/test.site"の唯一の子として<body>。解像度が指定された幅/高さであるかのようにサイトを表示し、スクロールバーで確認する必要があります。

サードパーティを使用するほど便利ではなく、自分で設定する必要がありますが、インターネットに接続せずにローカルでテストできるという利点があります。

— コーディクルムリン
ソース

5

なんで...天才だよ。+1

— マフィア

もちろん！ありがとうございました！^^

— オスカーデューブボーン2013年

感謝しきれません！

— Rahman Sharif

1

すべての正のフィードバックの人に感謝します。物事がいつ役立つかを知るのは良いことです。

— Cody Crumrine、2015年

1

それが誰にも役立つ可能性がある中で、@ Cody Crumrineが提案したGeniusを実行するためのサンプルコードを次に示します。<iframe src = " site to test.com" width = "1024" height = "768"> </ iframe>

— スチュアート

28

このソリューションは、上記で提案されたソリューションよりもはるかに高速です。

http://www.infobyip.com/testwebsiteresolution.php

browsershots.orgほど用途が広いわけではありませんが、はるかに高速です（数秒対45分のキュー）。

— カイル
ソース

これは悪い答えではありません。ただし、そのサイトでは、デスクトップコンピューターのブラウザーウィンドウのサイズを変更するだけではまだ自分ではできないことはまったくありません。私見、タブレットと携帯電話用のそのページのリンクはまったく意味がありません...小さなiPod画面では、私の1000ピクセル幅のサイトはMobile Safariによって自動的にサイズ変更され、完全に正常に表示されます。

— Sparky、

4

@ Sparky672、私は自分のブラウザのサイズを自分の画面解像度より大きくすることはできません。OPは1440で1920を見るように求めていました。たぶん方法はありますが、infobyipのソリューションと同じくらい簡単ですか？明らかなものを見落としている場合はお詫びします（自分がそうであるように感じます）。

— カイル

2

@ Sparky672に感謝し、問題ありません。しかし、それは事実ではないので、「そのサイトには、デスクトップコンピュータのブラウザウィンドウのサイズを変更するだけではまだ自分ではできないことは何もない」というコメントを削除してはなりませんか。

— カイル

1

@ Sparky672、垂直はどうですか？

— カイル

1

垂直方向を使用して、フォールドの上下に何があるかを確認します。StatsCounterやMouseFlowと組み合わせて、オーディエンスの何パーセントが何を見ているかを確認します。私はあなたを愛しています。私の口調を間違って読んでいると思います。そして、私は役に立ちたいと思いました。私が0票とコメントのリストで提供するソリューションを誰も調べません。しかし、まあ…

— カイル

9

いくつかのアイデア：

ブラウザのズームを使用し、1024x768 50％ズーム= 2048x1536のシミュレーション解像度。Chromeが画像などのサイズを変更することは知っています。物事は読みにくくなりますが、私はあなたが配置などをテストしていると仮定しています。

また、いくつかのスクリーンショットプログラムを使用して、通常の解像度よりも高いスクリーンショットを撮ることができます（Firefoxでのファイアショットでこれを行うことができましたが、非常に高い解像度ではメモリの問題があり、もはや無料ではありません）。

— 奇妙な
ソース

6

おそらくやりすぎの1つの解決策は、Xvfbを使用することです。目的の解像度と色深度を設定し、ブラウザにページをロードして、スクリーンショットを撮ります。

— オイゲンコンスタンタンディンカ
ソース

4

viewlike.usまたはscreen-resolution.comをお試しください。すべての可能な解決策ではありませんが、少なくとも最も一般的な解決策です。

私はそれらを試していませんが、それはかなり簡単なようです。

— エディ・チェン
ソース

screen-resolution is throws this： "画面の解像度が小さすぎます。選択したポップアップが、使用する画面の解像度に対して大きすぎます。画面の解像度は1440ピクセルx 900ピクセルです。開こうとしたポップアップウィンドウは1920です。 1200ピクセル。 "

— HappyDeveloper '20

「このサーバーにアクセスする権限がありません。さらに、ErrorDocumentを使用してリクエストを処理しようとしたときに404 Not Foundエラーが発生しました。Apachemod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 server at viewlike.us Port 80 "

— HappyDeveloper

2

これではテストの正確な解像度はわかりませんがzoom、ChromeまたはFFのツールを使用してズームアウトできます。これにより、高解像度画面でのサイトの外観がかなり正確になります。

— ジェイソン・ジェンナロ
ソース

2

サイトの静的なスクリーンショットを表示するだけで問題ない場合は、http：//browsershots.org/をお勧めします

画面サイズを指定する機能に加えて、他の多くのオプションを含め、ほとんどすべてのブラウザーとOSの組み合わせでサイトのスクリーンショットを表示するオプションを提供します。

ブックマークする価値があります。

— スパッドリー
ソース

1

wkhtmltoimageを試すと、任意の解像度でスクリーンショットを撮ることができます。

また、KDE4では、画面サイズを超えてウィンドウを拡大することができます。Windows 7でも見たことがあると思います。他のOSについてはわかりません。

— ユーザー123444555621
ソース

1

IE9を使用すると、ブラウザーウィンドウのサイズを任意のサイズに変更できます。開発者ツールの場合はF12キーを押し、[ツール]、[ツール]の順に移動します。サイズを変更して、希望のサイズを選択します。次に、ウィンドウが画面よりも大きい場合に、画面外のウィンドウをキャプチャできるツールを使用します。この記事は、Snagitがこれを実行できることを示しているようです。次に、キャプチャされた写真を見てください。

— ジャコ・ブリアーズ
ソース