iPad App用の画像（見栄え）をSafari経由で簡単に確認するHTML

投稿日：

ipad_app_preview_in_safariiPad Appの電子Catalogを作成しているときに、Designerの人から写真の画質を実機で簡単に確認したいという要望があったので、Safariを使ってAppっぽく表示する方法。

あくまでもiPadの使い方をよく知らない人向けの簡易的な方法。

大量の写真、画像をiPadに取り込みたいときは下記を参考に。

確認したい画像と下記HTMLをWeb Serverに置いてSafariで表示する。

<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <style>
body {
    margin: 0;
    padding: 0;
}
    </style>
</head>
<body>
    <img src="hoge.jpg"/>
</body>
</html>

"hoge.jpg"の画像Sizeは1024px x 768px

Safariで表示 → "Add to Home Screen"でHomeにShortcutを作成 → 起動
すると全画面っぽく表示できる。

 

< Related Posts >