モバイル側のページ開発で注意すべき問題
27979 ワード
詳細
1、携帯電話のウェブページの拡大と縮小を防止することが基本で、最も携帯電話のウェブサイトの開発者にとってすべて知っているべきで、metaの中のviewportを設置することです
一部の携帯電話サイトでは、次のような声明が表示されています.
DTDを設定した方式はXHTMLの書き方で、もし私たちのページがhtml 5を運用しているならば、DTDを設定しなくても、直接宣言することができます.
viewportを使用してページのスケールを禁止します.通常、user-scalableを0に設定して、ユーザーがページビューをスケールする動作を閉じます.
完全なviewport設定、もちろんuser-scalable=0、ある人もuser-scalable=noと書いてもいいです.
2、アップルの携帯電話のいくつかの設定.
contentがyesに設定されている場合、Webアプリケーションはフルスクリーンモードで実行され、逆には実行されません.contentのデフォルト値はnoで、正常に表示されていることを示します.読み取り専用のプロパティwindowでnavigator.standaloneは、Webページがフルスクリーンモードで表示されているかどうかを決定します.
3、format-detection設定.
format-detection自動認識ページの電話番号、メールアドレスを起動または無効にします.
4、スクロールバーを上下に引く時にカートン、遅い
Android 3+とiOS 5+がCSS 3をサポートする新属性はoverflow-scrolling
5、コピー禁止、テキスト選択禁止
モバイルデバイスが選択できるページテキストの解決(製品の必要に応じて)
6、長い間ページを押し続けているとフラッシュバックする
7、iphone及びipad下入力ボックスデフォルト内影
8、iosとandroidで要素をタッチすると半透明グレーのマスクが現れる
9、active互換処理即ち偽類:active失効
方法1:body追加ontouchstart
方法2:jsはdocumentにtouchstartまたはtouchendイベントをバインドする
10、アニメーション定義3 Dハードウェア加速を有効にする
注意:3 D変形によりメモリと消費電力が増加
11、Retinaスクリーンの1 px枠
12、画面を回転する時、フォントサイズの調整の問題
13、トップステータスバー背景色
説明:
このmetaラベルは、apple-mobile-web-app-capableを使用してフルスクリーンモードを指定しない限り、何の役にも立たない.
contentがdefaultに設定されている場合、ステータスバーは正常に表示されます.blankに設定すると、ステータスバーに黒い背景が表示されます.blank-translucentに設定すると、ステータスバーは黒で半透明に表示されます.defaultまたはblankに設定すると、ページはステータスバーの下に表示されます.すなわち、ステータスバーは上部を占め、ページは下部を占め、両者は相手を遮ったり遮ったりしません.blank-translucentに設定すると、ページの上部がステータスバーで覆われます(ページ20 pxの高さが上書きされ、iphone 4とitouch 4のRetina画面は40 pxです).デフォルトはdefaultです.
互換性iOS 2.1+
14、キャッシュの設定
携帯電話のページは通常、最初のロード後にキャッシュされ、リフレッシュするたびにサーバにリクエストを再送信するのではなくキャッシュが使用されます.キャッシュを使用しない場合はno-cacheを設定できます.
15、デスクトップアイコン
16、ブラウザのプライベート及びその他のmeta
QQブラウザプライベート
フルスクリーンモード
強制縦スクリーン
きょうせいクロススクリーン
適用モード
UCブラウザプライベート
フルスクリーンモード
強制縦スクリーン
きょうせいクロススクリーン
適用モード
その他
ハンドヘルドデバイスの最適化は、主にブラックベリーなどの古いviewportを認識していないブラウザに対して行われています.
マイクロソフトの古いブラウザ
Windows phoneクリックハイライトなし
17、IOSでinputキーボードイベントkeyup、keydown、keypressのサポートがあまりよくない
問題は、input searchであいまいな検索をする場合、キーボードにキーワードを入力するとajaxバックグラウンドで検索し、データを返し、戻ったデータにキーワードを赤で表示します.Inputでキーボードkeyupイベントを傍受するのは、アンドロイドの携帯ブラウザでは可能ですが、iosの携帯ブラウザでは赤くなるのが遅く、入力法で入力した後、すぐにkeyupイベントに対応するのではなく、削除してからしか対応しません!
解決方法:html 5のoninputイベントでkeyupの代わりに
1、携帯電話のウェブページの拡大と縮小を防止することが基本で、最も携帯電話のウェブサイトの開発者にとってすべて知っているべきで、metaの中のviewportを設置することです
一部の携帯電話サイトでは、次のような声明が表示されています.
DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">DTDを設定した方式はXHTMLの書き方で、もし私たちのページがhtml 5を運用しているならば、DTDを設定しなくても、直接宣言することができます.
viewportを使用してページのスケールを禁止します.通常、user-scalableを0に設定して、ユーザーがページビューをスケールする動作を閉じます.
完全なviewport設定、もちろんuser-scalable=0、ある人もuser-scalable=noと書いてもいいです.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">2、アップルの携帯電話のいくつかの設定.
<meta name="apple-mobile-web-app-capable" content="yes">contentがyesに設定されている場合、Webアプリケーションはフルスクリーンモードで実行され、逆には実行されません.contentのデフォルト値はnoで、正常に表示されていることを示します.読み取り専用のプロパティwindowでnavigator.standaloneは、Webページがフルスクリーンモードで表示されているかどうかを決定します.
3、format-detection設定.
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">format-detection自動認識ページの電話番号、メールアドレスを起動または無効にします.
4、スクロールバーを上下に引く時にカートン、遅い
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}Android 3+とiOS 5+がCSS 3をサポートする新属性はoverflow-scrolling
5、コピー禁止、テキスト選択禁止
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}モバイルデバイスが選択できるページテキストの解決(製品の必要に応じて)
6、長い間ページを押し続けているとフラッシュバックする
element {
-webkit-touch-callout: none;
}7、iphone及びipad下入力ボックスデフォルト内影
Element{
-webkit-appearance: none;
}8、iosとandroidで要素をタッチすると半透明グレーのマスクが現れる
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}9、active互換処理即ち偽類:active失効
方法1:body追加ontouchstart
<body ontouchstart="">方法2:jsはdocumentにtouchstartまたはtouchendイベントをバインドする
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
style>
<a herf=foo >bara>
<script>
document.addEventListener(‘touchstart‘,function(){},false);
script>10、アニメーション定義3 Dハードウェア加速を有効にする
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}注意:3 D変形によりメモリと消費電力が増加
11、Retinaスクリーンの1 px枠
Element{
border-width: thin;
}12、画面を回転する時、フォントサイズの調整の問題
*{
-webkit-text-size-adjust:100%;
}13、トップステータスバー背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />説明:
このmetaラベルは、apple-mobile-web-app-capableを使用してフルスクリーンモードを指定しない限り、何の役にも立たない.
contentがdefaultに設定されている場合、ステータスバーは正常に表示されます.blankに設定すると、ステータスバーに黒い背景が表示されます.blank-translucentに設定すると、ステータスバーは黒で半透明に表示されます.defaultまたはblankに設定すると、ページはステータスバーの下に表示されます.すなわち、ステータスバーは上部を占め、ページは下部を占め、両者は相手を遮ったり遮ったりしません.blank-translucentに設定すると、ページの上部がステータスバーで覆われます(ページ20 pxの高さが上書きされ、iphone 4とitouch 4のRetina画面は40 pxです).デフォルトはdefaultです.
互換性iOS 2.1+
14、キャッシュの設定
<meta http-equiv="Cache-Control" content="no-cache" />携帯電話のページは通常、最初のロード後にキャッシュされ、リフレッシュするたびにサーバにリクエストを再送信するのではなくキャッシュが使用されます.キャッシュを使用しない場合はno-cacheを設定できます.
15、デスクトップアイコン
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />16、ブラウザのプライベート及びその他のmeta
QQブラウザプライベート
フルスクリーンモード
<meta name="x5-fullscreen" content="true">強制縦スクリーン
<meta name="x5-orientation" content="portrait">きょうせいクロススクリーン
<meta name="x5-orientation" content="landscape">適用モード
<meta name="x5-page-mode" content="app">UCブラウザプライベート
フルスクリーンモード
<meta name="full-screen" content="yes">強制縦スクリーン
<meta name="screen-orientation" content="portrait">きょうせいクロススクリーン
<meta name="screen-orientation" content="landscape">適用モード
<meta name="browsermode" content="application">その他
ハンドヘルドデバイスの最適化は、主にブラックベリーなどの古いviewportを認識していないブラウザに対して行われています.
<meta name="HandheldFriendly" content="true">マイクロソフトの古いブラウザ
<meta name="MobileOptimized" content="320">Windows phoneクリックハイライトなし
<meta name="msapplication-tap-highlight" content="no">17、IOSでinputキーボードイベントkeyup、keydown、keypressのサポートがあまりよくない
問題は、input searchであいまいな検索をする場合、キーボードにキーワードを入力するとajaxバックグラウンドで検索し、データを返し、戻ったデータにキーワードを赤で表示します.Inputでキーボードkeyupイベントを傍受するのは、アンドロイドの携帯ブラウザでは可能ですが、iosの携帯ブラウザでは赤くなるのが遅く、入力法で入力した後、すぐにkeyupイベントに対応するのではなく、削除してからしか対応しません!
解決方法:html 5のoninputイベントでkeyupの代わりに
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){
var value = e.target.value;
});
script>