第10章 [WebKit活用術]横向き、縦向き、画面表示を調整する。 | Webアプリ開発日記

Webアプリ開発日記

e-veryStudyシステム(Java)をiPhoneに搭載されているSafari[WebKit]に対応する為の、ソフト開発日記。


テーマ:

第10章 [WebKit活用術]横向き、縦向きで画面表示を調整する。



iPhoneの横向き、縦向きにした時に、画面サイズが合わない場合、この動作イベントで


画面サイズを最適化することが出来ます。


イベント内では、傾き角度で横縦を判断します。

【手順】

①まず、ボディ部に下記を記述してイベントの定義

 <body onload="updateOrientation()" Onorientationchange="updateOrientation()">

②Viewportの設定

  <meta id="viewport" name="viewport" content="width=device-width, user-scalable=0" />

③JavaScript関数

 function updateOrientation() {
  //回転角度を検出
  switch(window.orientation) {
  //横向きを判定
  case 90:
  case -90:
    document.getElementById("viewport").setAttribute('content','device-width=480,

         width=480,initial-scale=1.0,maximum-scale=1.0, user-scalable=0');

    break;

  //縦向きを判定
  case 0:
  case 180:
  default:
   document.getElementById("viewport").setAttribute('content','device-width=320,

         width=320,initial-scale=1.0,maximum-scale=1.0, user-scalable=0');
   break;
 }
}



勉強クンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス