[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js

iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。

iOS.js

[ad#ad-2]

• iOS.jsの特徴
• iOS.jsのデモ

iOS.jsの特徴

iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。

改善

• min-height

  ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。

  ※下記にデモがあります。

• リンク

  ページ内の全てのリンクをWebAppで開きます。

• 100% height

  通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。

  ※下記にデモがあります。

• アドレスバー

  ページがロードされた時、アドレスバーを隠します。

[ad#ad-2]

CSS

• iOS用のクラス

  iOS用のクラスを用意。

  .iOS{...}

• デバイスファミリー用のクラス

  iPhone, iPadと異なるデバイスにも対応。

  .iOS[deviceFamily=iPhone_iPod]{...}

• デバイス用のクラス

  デバイスごとにも対応。

  .iOS[device=iPad]{...}

• 表示方向用のクラス

  縦・横向き表示のクラスです。

  .iOS[orientation=landscape] {...}

• Retinaディスプレイ用のクラス

  iPhone4, 新iPadに採用されているRetinaディスプレイ用のクラスです。

  .iOS.retina {...}

JavaScript

• Scrolling

  スクロールの機能を無効・有効にします。

• Zooming

  ピンチ操作でのズーム機能を無効・有効にします。

• function

  デバイスごとの関数やサイズなどのUAを取得する関数を多数用意。

  ※下記にデモがあります。

iOS.jsのデモ

Demo: min-height

ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。

Demo: 100% height

通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。

Demo: Check the Window size

表示サイズを取得します。