↑ のWebページをスマホで単純に表示すると画面から少しはみ出てしまう。更に、スマホ画面でサムネイルを横に2つ並べたい。ということで、スマホで見るときに、ページ全体を縮小して表示したい。
ページの構成上、CSSのメディアクエリで実現するのは難しそう。
スマホでWebページ全体を縮小表示するために、viewportのinitial-scaleで縮小値を指定した。縮小値は、単に自分のスマホに合わせた。viewportは、パソコンのブラウザには影響しない。
<meta name="viewport" content="width=device-width, initial-scale=0.46, maximum-scale=1.0, user-scalable=yes">