スマートフォンでの操作説明

スマートフォンでの操作説明

スマートフォンとは

当サイトには、「スマートフォン表示」機能が実装されています。ここでは、スマートフォン表示機能について説明します。
スマートフォンには、iPhoneのような手のひらサイズの端末や、iPadのようなサイズのタブレット型の端末もあります。パソコン上でのInternet Explorerのようなブラウザとの違いは、次のとおりです。

  • 画面の縦向きか横向きかを検出し、画面の切り換えができる
  • ホームページ画面の主に横幅の最大表示領域に合わせて、縮小(一部高解像度端末では拡大)する機能がある
  • 表示領域の基本の画面幅などを、任意のピクセル数に指定できる

上記の機能がない一部のスマートフォンでは、スマートフォン表示機能が利用できないため、通常のパソコンと同じ表示となります。iPhoneやiPad、大部分のAndroid端末では、スマートフォン表示機能を利用できます。(Android端末で横向き表示で機能が利用できない一部の機種があります)


サイト表示時のモード

当サイトをスマートフォンで利用する場合、次の3つのモードがあります。
(※「モード」と「表示」は、必ずしも一致しないので注意してください)

  1. スマートフォンモード
    表示領域の基本の画面幅を320ピクセルとし、このサイズでも見やすいスマートフォン用のレイアウト、文字サイズで表示する。幅が320ピクセルを超えたコンテンツ(内容)は、横スクロールや縮小で表示する。小さな画面サイズのスマートフォン端末でも閲覧しやすいため、この表示を「スマートフォン表示」と呼ぶ。
  2. 全画面モード
    表示領域の基本の画面幅を、表示サイトの横幅のピクセルと同一に設定して、パソコン上のブラウザと同じレイアウトで表示する。表示領域の幅とサイトの幅が同じため、サイトの横幅を超えた左右の背景領域は表示されないので、この表示を「パソコン表示(全画面表示)」と呼ぶ。 サイト全体を表示するので、解像度の低い端末における全体の視認性は高くなる。
  3. デバイスモード
    表示領域の基本の横幅を、そのデバイス(端末)の解像度横幅と同一に設定して表示する。解像度横幅が400ピクセルを超えないものはスマートフォン用のレイアウト、400ピクセルを超えたものはパソコン用のレイアウトとする。解像度横幅が表示サイトの横幅よりも広い場合、左右の背景領域が表示されるので「パソコン表示(全画面表示)」とは区別して、「パソコン表示」と呼ぶ。ただし、解像度横幅が400ピクセル~表示サイト横幅のデバイスでは、実用上「パソコン表示(全画面表示)」と大差ないことが多い。

動作説明

  • 最初に横向きでホームページを読み込むと「デバイスモード」になり、横向きの解像度横幅が400ピクセル以上であれば「パソコン表示」になります。
  • 最初に縦向きでホームページを読み込むと、「スマートフォンモード」で「スマートフォン表示」になります。
  • 横向きでも、縦向きでも、いったん読み込んだ後に再読み込みやページ移動をせず向きを変えてもモードは変わりません 。 それぞれホームページを読み直すか、別のページへ移動すると、その時の画面の向きの状態でモードが決まります。
  • 「デバイスモード」、「スマートフォンモード」では、向きを変えて再読み込みやページ移動をしない場合は、モードは変わりませんが、デバイスの解像度横幅によっては一時的に画面の表示状態が変わる場合があります。iPhoneで縦向きの「スマートフォン表示」から横向きにした場合は「スマートフォン表示」のままになり、横向きの「パソコン表示」から縦向きにした場合は「スマートフォン表示」に切り替わります。iPadで縦向きの「スマートフォン表示」から横向きにした場合は「スマートフォン表示」のままになり、横向きの「パソコン表示」から縦向きにした場合は「パソコン表示」のままです。
  • 「スマートフォン表示」の状態から「パソコン表示」に切り替えるには、フッタ領域の上部に表示される下図の表示バーの「パソコン」ボタンを押します。すると、「全画面モード」になり、画面の向きによらず「パソコン表示(全画面表示)」になります。
    パソコンボタン
  • 「パソコン表示」の状態から「スマートフォン表示」に切り替えるには、縦向きにして同じくフッタ領域の上部に表示される、下図の表示バーの「スマートフォン」ボタンを押します。すると、「スマートフォンモード」に変わり、「スマートフォン表示」になります。
  • 横向きの状態で押しても「デバイスモード」になるため、「パソコン表示」のままです。ただし縦向きにしてホームページを読み直すか、別のページへ移動すると、「スマートフォンモード」になり、「スマートフォン表示」に切り替わります。
    スマートフォンボタン
  • 「デバイスモード」での「パソコン表示」では、フッタ領域の上部に下図の表示バーが表示されます。「全画面表示」ボタンを押すと「全画面モード」となり、画面の向きによらず「パソコン表示(全画面表示)」になります。
  • 「全画面モード」では、その他のモードとは異なり、クッキーが保存されます。そのため、次回以降のホームページ閲覧でも状態が維持されます。
  • ここで説明した表示バーは、スマートフォンでのみ表示されます。

 

サブメニュー表示切り替えボタン

スマートフォン表示では、最初のページに下図のような「サブメニュー表示」バーが表示されます。サブメニュー表示切替ボタン

この「切替」ボタンは、パソコン表示レイアウトでの左領域(もしくは右領域)にあるメニューをサブメニューとして、中央領域のコンテンツ(記事本文など)と表示を相互に切り替えます。ボタン以外の場所をタップすると、サブメニュー表示バーがページ先頭位置まで移動し、再度タップすると元の位置に戻ります。