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

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

サイトのキャプチャ

iOS.js

iOS.jsの特徴

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

改善

  • min-height
    ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。
    ※下記にデモがあります。

  • リンク
    ページ内の全てのリンクをWebAppで開きます。
  • 100% height
    通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。
    ※下記にデモがあります。

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

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

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

top of page

©2017 coliss