www.wanichan.com

スマートフォンで縮小表示されないようにするには

Section 4 トップページと基本スタイルの作成
最終更新日時: 2014/03/10 18:57:02
  • このエントリーをはてなブックマークに追加

スマートフォンで自動的に縮小されないようにするには、METAタグのviewportにて、デバイスのサイズの値を取得するように記述する必要があります。コードビューに切り替えて、<head>と</head>の間に挿入すると簡単です。

はじめに

スマートフォンにはViewportという機能があります。スマートフォンでWebサイトを表示する際の仮想的なウィンドウサイズといえる機能で、初期値は横幅980pxに設定されています。つまり、PCで横幅980ピクセル幅表示した状態が縮小されて小さなスマートフォンの画面で再現されるということになります。

スマートフォンで横幅980ピクセル指定で縮小されないようにするには、METAタグのviewportを使って、デバイスのサイズの値を取得するように記述する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">
width=device-width
幅=デバイス幅
initial-scale=1.0
倍率の初期値の設定。デフォルトではページを画面に合わせるように設定されている。ここでは1倍で。
minimum-scale=1.0
最小倍率の指定。1~10まで。既定は0.25。ここではズーム倍率を1倍に。
user-scalable=yes
ユーザーがズームできるかどうかの設定。初期値はyesでズームOK。noならズームできない。

個人的には、ユーザーがズームできるようにした方がいいと思います。たいていのサイトではページ表示した瞬間の倍率は1倍で、デバイス幅に合わせて表示に指定していると思います。

Expression Web 4にて作業中のWebページのプロパティを開いて、[ユーザー設定]タブの[ユーザー変数]を追加する方法もありますが、コードビューでタグを追加した方が手っ取り早いでしょう。

操作方法

  1. コードビューに切り替えます。
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> の次の行にカーソルを移動します。
  3. ViewportのMETAタグを挿入します。
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">

備考

Viewportの設定が終わったら、[ページのプロパティ]ダイアログボックスの[ユーザー設定]タブで以下の図のように代入されます。

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ