個人的忘備録です。
webのクライアントはPC/タブレット/スマホ辺りが主流だと思います。
これらは搭載している画面サイズがマチマチで、webサイト作ると色々書き方が面倒だという事は判りましたが、ネットで検索するとレスポンシブがどうたらなど、非常に苦労されているようです。
※本情報はAndroid10/Windows10で検証しているので、それ以前のOSは加味していません
極論ですが、自前でサイト構築するなら、そこまでの情報は不要であると考えcssで沢山のクライアントに対応できないか考えてみました。
stylesheet部分
@charset "utf-8";
p.page {
width: 100%;
text-align: center;
}
p.page img {
width: 90%;
height: auto;
}
html本文
<body>
<p class="page">
<img src="image1.jpg">
</p>
</body>
こうすると、どのクライアントでも表示領域の横幅90%で画像を表示できるっぽいです。
firefoxやchromeを使っているなら開発ツールを利用する事でスマホなんかのレビューもできるし、PC内でイメージが捉えられますね。
【解説】
p.pageはpタグ専用ののpageクラスである事を明示します
p.page imgはpタグのpageクラスの子階層にあるimgタグにのみ影響を与える事を明示します。
width: ??%は画面幅（子階層の場合は親階層の幅)に対して何%の大きさで表示するかを定義します
height: auto; は幅に連動して高さを自動調節します（縦横比を継承）
【まとめ】
コーディングの手間を惜しんで、ソースを統一し、デバッグ工数を少なくしたい場合にどうかな？と考えました。
サーバはjavascriptを経由しないとクライアントの表示可能サイズが不明なので、苦肉の策です
他にやるならパッと思いつくものだと
1)cssでcalcという関数が使えるようになったみたいなので、自前で演算する
2)User-Agentを解析して、エージェントのOS事にそれっぽいコードを書く
等が考えられますが、コード量とかデバッグ考えると現実的じゃないと思います。