晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

備忘録:スマホでページ全体を縮小表示したい時は、viewportのinitial-scaleで縮小値を指定する。

↑ の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">

f:id:art2nd:20190217103718j:plain