iphoneのsafariブラウザでフルスクリーン閲覧を実現する方法
通常、携帯ブラウザでホームページを開くと、ナビゲーションが上に止まって、実際に展示されているスクリーンが小さくなります。ロードしたら、スクリーンは自動的にフルスクリーンになりますか?これはこの文章で議論します。
Add to Home Sreen
フルスクリーンといえば、iPhoneの下のsafariには特に重要な機能があります。「Add to Home Sreen」です。Safariブラウザの一番下にあります。真ん中の位置をクリックしてください。これはウェブサイトのアドレスをハイパーリンクとして携帯のデスクトップに置くような機能です。直接アクセスできます。ただし、各リンクにはjsが特殊処理を行う必要があります。それは監聴ページがイベントをクリックし、リンクする場合はwindow.location=this.hrefを使用します。このようにページは現在のローカルウィンドウからブラウザにジャンプしません。具体的なコードはどのように処理されているか見てみます。実はHEADコードに必要なデータを追加するだけです。
Add to Home Sreen
フルスクリーンといえば、iPhoneの下のsafariには特に重要な機能があります。「Add to Home Sreen」です。Safariブラウザの一番下にあります。真ん中の位置をクリックしてください。これはウェブサイトのアドレスをハイパーリンクとして携帯のデスクトップに置くような機能です。直接アクセスできます。ただし、各リンクにはjsが特殊処理を行う必要があります。それは監聴ページがイベントをクリックし、リンクする場合はwindow.location=this.hrefを使用します。このようにページは現在のローカルウィンドウからブラウザにジャンプしません。具体的なコードはどのように処理されているか見てみます。実はHEADコードに必要なデータを追加するだけです。
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- -->
<!-- , apple-touch-icon-precomposed.png -->
<!-- home screen app iPhone icon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="startup/apple-touch-icon-57x57-precomposed.png" />
<!-- home screen app iPad icon -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="startup/apple-touch-icon-72x72-precomposed.png" />
<!-- home screen app iPhone Retinas icon -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="startup/apple-touch-icon-114x114-precomposed.png" />
<!-- home screen app iPad Retinas icon -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="startup/apple-touch-icon-144x144-precomposed.png" />
<!-- iPhone5 -->
<link rel="apple-touch-startup-image" href="startup/startup5.png" media="(device-height:568px)">
<!-- iPhone4 -->
<link rel="apple-touch-startup-image" size="640x920" href="startup/startup.png" media="(device-height:480px)">
はまた、具体的な設定を知りたいです。アップルの公式サイトを参照して説明してください。もちろん、起動図に対しては、114*114の写真だけを使ってもいいです。
フルスクリーンjsコードwindow.addEventListener('DOMContentLoaded', function() {
var page = document.getElementById('page'),
nav = window.navigator,
ua = nav.userAgent,
isFullScreen = nav.standalone;
if (ua.indexOf('Android') !== -1) {
// 56 Android Browser
page.style.height = window.innerHeight + 56 + 'px';
} else if (/iPhone|iPod|iPad/.test(ua)) {
// 60 Safari
page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'
}
setTimeout(scrollTo, 0, 0, 1);
}, false);
このコードは本質的に現在のウィンドウの高さ+ナビゲーションバーの高さを実際のスクリーンの高さに取得します。最後にscrollToメソッドを呼び出します。