R共通設定(基本設定)

『TAテーマ001: Version 2.07以降』の『レスポンシブデザイン』共通設定(基本設定)の説明です。

 

ご覧になりたい項目をクリックしてください

基本設定

viewport

R共通設定(基本設定)基本設定

レスポンシブデザイン基本設定です。項目を入力して設定ページの下部にある”レスポンシブデザイン『基本設定』設定更新”をクリックすると選択が確定します。

① レスポンシブデザイン:チェックを入れるとレスポンシブデザインが有効になります。

② レスポンシブデザイン時のサイドバー表示 ※ 通常画面で表示されている場合に有効です。

③ レスポンシブデザイン時のサブサイドバー表示 ※ 通常画面で表示されている場合に有効です。

④ レスポンシブデザインに切り替わる画面ピクセル幅 ※ 一般的なスマートフォンの縦表示のみが対象の場合は640ピクセル、横表示も含める場合は770ピクセルを入力します。

⑤ レスポンシブデザインの左右余白付きコンテンツの幅 ※ 100%以下:100%との差は左右の均等余白になります。

R共通設定(基本設定)viewport

viewportの出力例

レスポンシブデザイン有効時のviewport設定です。項目を入力して設定ページの下部にある”レスポンシブデザイン『基本設定』設定更新”をクリックすると選択が確定します。

① viewport設定出力(レスポンシブデザインが有効の時に有効です)

②(仮想表示)幅(200~10000の範囲:端末に任せる場合の“device-width”は0を、未使用の場合は-1を入力)

③ 初期拡大倍率(最小倍率~最大倍率の範囲:未使用の場合は-1を入力)

④ 最小倍率(0~10の範囲:未使用の場合は-1を入力)

⑤ 最大倍率(0~10の範囲:未使用の場合は-1を入力)

⑥ ユーザーの拡大縮小操作許可

具体的にはヘッダーに記述される下記の”viewport”の各項目の値になります。

<meta name=”viewport” content=”width=②, initial-scale=③, minimum-scale=④, maximum-scale=⑤, user-scalable=⑥”>

※ 比較的多い設定は、

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

です。viewportの解釈(効果)はOSによって異なりますのでご留意ください。特にiOS(iPhone、iPadなどのOS)はバージョンによって解釈が一定ではありません。

  • LINEで送る


ta_thm001_downloadta_designing