ズームで拡大縮小せずにレスポンシブデザインレンダリングからスクリーンショットを作成するにはどうすればよいですか？
Webアプリケーションのスクリーンショットが必要です。印刷されたポスターに掲載されるので、高DPIバージョンで必要です。私は96DPIモニターを持っているので、標準のスクリーンショットは印刷時にピクセル化されます。この問題に対する私の解決策は
- 画像を必要なサイズで300dpiで印刷できるように、必要なピクセル数を計算します
- firefoxのレスポンシブデザインツールを正確にそのサイズのビューポート、たとえばX xYピクセルに設定します
- ctrl + +を使用して、必要なデザイン要素がビューに表示されるまでズームします（その部分は重要です。コンテンツがズームインまたはズームアウトされたときにソリューションが機能する必要があります）
- 組み込みのスクリーンショットツールを使用してスクリーンショットを作成します。
- gIMPを使用して、実際のピクセル数を変更せずに画像の解像度を300dpiに変更します
驚いたことに、スクリーンショットはX x Yピクセルではなく、小さいサイズ、たとえば0.67X x 0.67Yだったので、拡大せずに200dpiの画像しか取得できませんでした。要因も変化しました。遊んでみると、スクリーンショットのサイズはズームのレベルによって決まることがわかりました。
アドオンを使用してスクリーンショット（AwesomeScreenshot Plus）を作成すると、まったく同じ問題が発生しました。 Chromeを使用すると、別の問題が発生しました。Chromeは完全な大きなビューポートをレンダリングせず、画像の一部のみがキャプチャされるためです。私の知る限り、IEには、物理的な画面制限を超えてビューポートサイズを拡大するためのツールがありません。
スクリーンショットを撮る方法について何か提案（ブラウザアドオン、おそらく別のブラウザ？）はありますか？アプリケーションのJavaScriptが多少複雑であり、HTMLとCSSをその場で少し調整する必要があるため、PageLayoutsのようなものではなく、ページをレンダリングするためのブラウザーが必要です。
私はWindowsPCで作業していますが、私の部門には、このタスク専用の有料ツールに投資する予算がありません。
私のために働いたのは、Firefoxで開発者コンソールを開き、右上のツールボックスオプションをクリックしました（小さな歯車のように見えます）。 
[利用可能なツールボックスボタン]で、[フルページのスクリーンショットを撮る]をオンにしました。これにより、ツールボックスのオプションボタンの横に小さなカメラボタンが表示されました。 
次に、レスポンシブデザインモードで解像度を設定し、フルページのスクリーンショットボタンを使用してスクリーンショットを撮りました。私は必要な正しい解像度として出てきました。
注：レスポンシブデザイン機能にスクリーンショットボタンがあることは知っていますが、スクリーンショットを撮るときに、設定した解像度になりませんでした。
Pearl Crescent Page Saver と呼ばれるFirefoxアドオンでのみ可能です。ここでは、マークされた設定の％値に200または300を入力します。ページをズームし（ピクセル化されたアップスケーリングではありません）、ビューポートの2〜3倍のスクリーンショットを撮ります。私はそれを使用してウェブサイトの印刷用の300-600dpi解像度のスクリーンショットを作成しましたが、それは素晴らしいことがわかりました（特に、サイトがRetina対応の場合、それ以外の場合はCSSの線、コーナー、フォントなどのみが適切に拡大縮小されました）。
Chromeの代替品を探しています。私は誤ってFirefox用のこのプラグインを見つけましたが、それは少しアバンダンウェアに見え、最新バージョンでは動作しなくなりましたが、古い安定したFirefoxはそれを十分に実行します。代替手段がない場合は、このためだけにそのようなバージョンを維持する価値があるかもしれません。
