標準の画面サイズについて

下記サイトを読んでみた。
・2020年版 Webデザイナーが覚えておきたいWebデザインの横幅サイズを解説！
・iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 2020/1/12更新

これらによれば、「デスクトップでよく使われている「1920×1080」と「1366×768」のサイズ」ですが、横幅950px〜1000pxであれば多くのディスプレイで写せることから、このサイズが程よいサイズということになります。実際に大手銀行・証券は950pxか960pxで作られています。
更にそのサイトを利用している方を鑑みて、1300pxで設計するものよいでしょう。
タブレットのサイズはiPadは初代が横置き1024pxで最新は2732pxですので、これらから960pxという横幅がPCやタブレットでは現実的な最適サイズと考えてよいでしょう。

次は、フォントや画像のサイズについてですが、標準的なサイズで作成しても、利用者によっては小さくて見えないということもあるでしょう。もし、拡大縮小ボタンがあればそのような方にも満足していただけるようになるでしょう。
CSS3では、tranceform:scaleで拡大、縮小ができるようになったので、それをつかってはどうでしょうか？

ということで、transform: scaleを使った拡大縮小ボタンを作ってみました。

画面左上の拡大縮小ボタンを押すと画面全体が拡大縮小します。

（CSS3の「transform:scale」と「transform-origin」を使っています。）範囲が分かりやすいよう、拡大縮小すると背景に色をつけてます。

参照サイトは以下の通りです。
・CSS3 Transform（変形）関連のまとめ
・CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】


ブラウザサポート状況は以下の通りです。
transform: scaleとtransform-originを両方サポートしている主要ブラウザのVer
・IE 9以降
・Edge 12以降
・Firefox 3.5
・Chrome 4以降
・Safari 3.1以降
・Opera 11.5以降