Html 5はiPhoneのタッチパネルのスクリプトをサポートする
2317 ワード
モバイルプラットフォームのタッチパネルJSコード
タッチスクリーンデバイスがバインドできるイベントは、ontouchstart、ontouchmove、ontouchendであり、タッチスクリーンの開始、ドラッグ、完了に対応しています.
一般的な書き方:
これにより、jsコードはモバイルデバイスのタッチスクリーンイベントをサポートする.
効果に対する要求がより高い場合はjquery-mobileを使用して実現できます.しかし、ページの動作はまだ研究する必要があります.
その他のIphoneアプリケーションコードの抜粋:
Safariブラウザの下でiPhoneを回転させるときに文字のサイズを自動的に調整することは禁止されています.iPhoneを回転させると、Safariブラウザが文字のサイズを調整します.何らかの理由でこの効果を阻止したい場合は、以下のCSS宣言を使用します.
-WebKitのテキストサイズの調整は、WebKitのCSS属性のみで、テキストの調整を制御できます.
iPhoneでは、ユーザーが縦モードと横モードでWebページを閲覧できるようにするため、閲覧者がどのモードでWebページを表示しているかを検出する必要があります.
このJavaScript関数は、現在のiPhoneの方向を容易に検出でき、特定のCSSクラスに適用され、cssでスタイルを定義できます.この例では、CSSクラスがID:page_に追加されていることに注意してください.wrapper .
iPhone/iPod専用CSSスタイルの定義
嗅覚器は有用であるが、多くの理由でブラウザを検出するための最善の方法ではない.iPhoenのCSSスタイルをより簡潔に定義する方法を探している場合は、次のコードを使用します.通常のCSSファイルにペーストする必要があります.
ツールバーの自動非表示
iPhoneのような小さな画面では、ツールバーが役に立つ場合がありますが、スペースも無駄になります.Safariブラウザツールバーをデフォルトで非表示にするには、次のJavaScriptコードを使用します.
特殊リンクの使用
数年前に「mailto」というリンクが一般的だったのを覚えていますか?この接頭辞は、デフォルトのEメールクライアントを自動的に開く人です.iPhoneはすでに2つの類似の接頭辞を発売しており、telとsmsはあなたに役立つかもしれません.これを実行する唯一の方法は、以下のHTMLページを貼り付けることです.
タッチスクリーンデバイスがバインドできるイベントは、ontouchstart、ontouchmove、ontouchendであり、タッチスクリーンの開始、ドラッグ、完了に対応しています.
一般的な書き方:
$("#u_obj_id").bind('touchstart', function (e) {
point = hasTouch ? e.originalEvent.touches[0] : e;
// point
// some action
})
これにより、jsコードはモバイルデバイスのタッチスクリーンイベントをサポートする.
効果に対する要求がより高い場合はjquery-mobileを使用して実現できます.しかし、ページの動作はまだ研究する必要があります.
その他のIphoneアプリケーションコードの抜粋:
Safariブラウザの下でiPhoneを回転させるときに文字のサイズを自動的に調整することは禁止されています.iPhoneを回転させると、Safariブラウザが文字のサイズを調整します.何らかの理由でこの効果を阻止したい場合は、以下のCSS宣言を使用します.
-WebKitのテキストサイズの調整は、WebKitのCSS属性のみで、テキストの調整を制御できます.
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
iPhoneでは、ユーザーが縦モードと横モードでWebページを閲覧できるようにするため、閲覧者がどのモードでWebページを表示しているかを検出する必要があります.
このJavaScript関数は、現在のiPhoneの方向を容易に検出でき、特定のCSSクラスに適用され、cssでスタイルを定義できます.この例では、CSSクラスがID:page_に追加されていることに注意してください.wrapper .
window.onload=function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;
case -90:
contentType += “right”;
break;
case 90:
contentType += “left”;
break;
case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}
iPhone/iPod専用CSSスタイルの定義
嗅覚器は有用であるが、多くの理由でブラウザを検出するための最善の方法ではない.iPhoenのCSSスタイルをより簡潔に定義する方法を探している場合は、次のコードを使用します.通常のCSSファイルにペーストする必要があります.
@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}
ツールバーの自動非表示
iPhoneのような小さな画面では、ツールバーが役に立つ場合がありますが、スペースも無駄になります.Safariブラウザツールバーをデフォルトで非表示にするには、次のJavaScriptコードを使用します.
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
特殊リンクの使用
数年前に「mailto」というリンクが一般的だったのを覚えていますか?この接頭辞は、デフォルトのEメールクライアントを自動的に開く人です.iPhoneはすでに2つの類似の接頭辞を発売しており、telとsmsはあなたに役立つかもしれません.これを実行する唯一の方法は、以下のHTMLページを貼り付けることです.