Retina display の表示は本当にきれいでいいですね。 それを活かして、Safari で写真をきれいに表示するために、大きな画像ファイルを表示したときにピクセル等倍表示ができるようにする方法を考えました。
次のような記述をしたスタイルシートのファイルを用意して、Safari の環境設定で指定します。
body:only-child img[style*="-webkit-zoom-out"] {
zoom: 0.5;
}
大きな画像ファイルを開くと、最初はウインドウサイズに合わせて縮小して表示されますが、画像をクリックすると拡大して表示されます。 そのとき Retina display では画像のピクセルサイズが 2倍に拡大された表示になり高解像度が活かされません。 このスタイル指定は、その表示をピクセル等倍になるようにします。
画像ファイルを開いたウインドウを Web インスペクタで見ると body ダグ内に img タグが 1つあるだけになっています。 そのため body:only-child という条件を指定しています。
そして拡大状態の時には img タグの style に cursor: -webkit-zoom-out; という指定があります。 そのため img[style*="-webkit-zoom-out"] という条件を指定しています。
それらの条件に一致したときに zoom: 0.5; を指定してピクセル等倍表示になるようにしています。
この方法では、ウインドウサイズに合わせて表示されているときの縮小率が 0.5 より小さいと、拡大表示にしたときの方が表示が小さくなることがあり、おや？と思うかもしれません。
クリックすると拡大／縮小ではなく、ウインドウサイズ／ピクセル等倍に切り替わることになります。
また、ウインドウサイズよりも小さい画像はピクセル等倍表示になりません。
その辺りはお好みに合わせて応用していただければと思います。
