会社では、ネイティブ APP と h5 の混合開発プロジェクトに参加し、プロジェクトの h5 部分を担当しました。プロジェクトで発生した問題を以下にまとめます。
具体的な質問質問 1: ページ スクロール バーの問題問題の説明
PC ブラウザで Web ページを閲覧するとスクロール バーが表示されますが、モバイル ブラウザで開いた場合はスクロール バーが表示されません。
解決
ページの最外層を設定します (ページを作成するときは、通常、ページのコンテンツを保存するために body タグに大きなコンテナを作成します)。set overflow:auto/scroll; の値は設定できません。高さ:100% それも無理)
例
<body> <div style=overflow:scroll/auto;> //Web ページのコンテンツ</div></body>質問 2: touchstart イベントと touchend イベントの使用
問題の説明
touch.js ファイルが導入され、インタラクティブ効果を実現するために touchstart イベントと touchend イベントが使用されると、一部の携帯電話 (例: 低バージョンの Honor 携帯電話) でイベント トリガーの失敗の問題が発生します。
解決
方法 1:removeEventListener と addEventListener を一緒に使用する
方法 2: e.preventDefault() を追加して、一部の携帯電話がデフォルトでジャンプしないようにします。
方法 3: JQuery でイベント バインディングを実装する
注: メソッド 1 とメソッド 2 はどちらも addEventListener を使用してイベント リスニングを実装するネイティブ JS であり、dom 要素が touchstart イベントと touchend イベントを使用する場合は、イベント バインディングまたはイベント リスニングと組み合わせて使用する必要があります。そうしないと、js 部分が例外。
コード
//メソッド 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',callback, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//方法 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e.防止デフォルト();}、 false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false);質問 3: 長押しによるクラッシュの問題シナリオ復元
XXX のリスト ページがあります。リスト ページでリスト項目を長押しする (テキストをタッチする) と、バージョンの低い携帯電話ではクラッシュが発生します。
解決
js 部分: イベントがトリガーされたときに、デフォルトの動作を防ぐために e.preventDefault() を追加します。
css部分：テキストのコピーを禁止するコードを追加
コード
//js 部分: e.preventDefault(); //css 部分: -webkit-touch-callout: none; // コピーを無効にする -moz-user-select: none; -khtml-user-select:なし;ユーザー選択: なし;質問4: モバイル端末の1pxの問題
問題の説明
携帯電話ごとにピクセル密度が異なるため、CSS の 1 ピクセルはモバイル デバイスの 1 ピクセルと同等ではありません。このプロジェクトでは、js と rem をモバイル画面の適応に使用しているため、0.5px の状況が発生し、その結果、携帯電話の下位バージョンでは 0.5px の境界線を表示できません。
解決
CSS を使用して 1px の問題を解決し、1px に設定する必要がある dom 要素に border-width:1px; を直接書き込みます。
コード
//HTML部分: <div class='class1'></div>//css部分: .class1{ border: 1px Solid #ccc;}//css部分/※モバイル端末起動時の1pxの正常表示の問題*/% border-1px{ 表示: ブロック; 左: 0; 幅: ';}.border-1px{ 位置: 相対; %border-1px; ボトム: 1px ソリッド #ccc; } &::before{ %border-1px; ボーダー-ボトム: 1px ソリッド #ccc; webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ .border-1px{ &::after{ -webkit-transform: スケール Y(0.7); 変換: スケール Y(0.7) } }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio) :2){ .border-1px{ &::after{ -webkit-transform: スケール Y(0.5); 変換: スケール Y(0.5); }}/*モバイル端末での1pxの正常表示の問題*/問題 5: js は = 記号を含む URL のパラメータ値を正しく解析できません問題の説明
プロジェクトでは、データ リクエストのパラメーター値が URL アドレスから取得されており、パラメーター値に = 記号が含まれているため、パラメーター値を正しく解析できません (ps:js は、URL のパラメーターを区切るために = 記号を使用します) )
解決
URL をトランスコードしてからデコードします [このプロジェクトでは、APP はトランスコードされた URL アドレスを提供し、フロントエンドは geturlparams プラグインを使用して URL アドレスのパラメーター値を取得します]
コード
//デコード = 数値 dom.token = decodeURI($.query.get(token)); //プラグイン //デコードせずに値を取得する dom.msgid = $.query.get(msgid);質問6: ネイティブjsイベントリスニングとjqueryイベントバインディングはiosでは無効です
問題の説明
イベント リスニングまたはイベント バインディングを使用する場合、親要素が body または document 要素を選択するため、iOS でのイベント トリガーは無効になります。
解決
body 要素と document 要素を親要素として使用しないでください
質問 7: iOS では日付が NaN として表示されます問題の説明
Date の日付形式には ios での互換性の問題があります。ios の日付は NaN として表示されます。
解決
解決策: 2017/12/26 19:36:00 形式は ios でサポートされていますが、2017-12-26 19:36:00 形式は ios で Nan を表示します (Android では正常に表示できます)。
コード
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//時間形式の「-」を iOS と互換性のある「/」形式に変換します質問 8: iOS のクリック イベントに問題があります。
問題の説明
クリック イベントが iOS クリックによってトリガーされると、イベント委任の親要素モジュールが選択されます [つまり、イベント バブリングにより、親にはデフォルトのスタイルがあり]、たとえば透明なレイヤーが存在します。
<ul> <li>リスト項目 1</li> <li>リスト項目 2</li> <li>リスト項目 3</li></ul>
分析: たとえば、iOS ユーザーがリスト項目 1 をクリックすると、親レイヤーの UL は透明なスタイルになります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。