技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

スマホで画像サイズを最適に表示させる方法

スマホで画像サイズを最適に表示させる方法

現代ではWebページを見る方法が増え、スマホで見る人も増えました。 ですのでスマホでwebページを見た時でも綺麗な画面サイズで見えるようにすることが必須です。

その場合に良く使う技が「viewportの設定」を用いることです。

サンプル

index.html
.
.
.
<head>
<meta charaset="ja">
<meta name= "viewport" content="width=device-width, user-scalable=yes,initial-scale=1.0">
<title>ホゲー</title>
<meta name= "viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">

この1行をmetaタグに追加することでスマホで画面の表示サイズを調整することが出来ます。

どのように調整しているのか

① width=device-widthで画面の幅をデバイスの幅に合わせている。
② user-scalable=yesは利用者が画面サイズを調整できる機能を有効にしている。
③ initial-scale=1.0は初期表示の倍率を1倍に指定している。これによってデバイスを横にしても適切な画面サイズに自動調整される。

以上