記事ディレクトリ
1.ios側は入力カーソルの高さに対応
【不具合】 Androidフォンでは入力ボックスのカーソルは問題なく表示されるのですが、 Appleフォンで
入力をクリックするとカーソルの高さが親ボックスの高さと同じになってしまいます。たとえば、下の図では、左の図は通常予想される入力ボックス カーソルで、右の図は ios 入力カーソルです。
[分析] 行間の高さを設定するheight属性と、行間の距離(行の高さ)を設定するline-height属性を使うのが一般的ですが、入力をクリックすると、カーソルの高さは自動的に同じになります。親ボックスの高さ。(Google Chrome の設計原則、別の可能性として、コンテンツがない場合、カーソルの高さは、入力の行の高さの値に等しくなります。コンテンツがある場合、カーソルの高さは、テキストの下部に [ ] と
行の解决办法高さを入力 行の高さの高いコンテンツはパディングで拡張されます
2. iOS側のWeChat h5ページが上下にスライドするとフリーズしてページがなくなる
[問題] ios 側で、ページを上下にスライドするときに、ページの高さが 1 画面を超えると、明らかにフリーズし、ページの一部のコンテンツが完全に表示されないことがあります。右の写真が通常のページで、横がiosです。 上下にスライドさせた後、左の写真の下部がカトンによって失われます。
[分析] 一般的に、WeChat ブラウザのカーネルは、Android は組み込みの WebKit カーネルを使用し、iOS は Apple の理由により組み込みの Safari カーネルを使用し、Safari はネイティブ コントロールを使用してオーバーフロー スクロールを実装します。-webkit-overflow-scrolling を含む Web ページの場合、UIScrollView が作成され、レンダリング モジュールが使用するサブレイヤーが提供されます。[検証中]
[解决办法] public スタイルに次のコード行を追加するだけです
*{
-webkit-overflow-scrolling: touch;
}
ただし、この属性にはバグがあり、たとえば、ページ内に絶対配置を設定したノードがある場合、ノードの表示が乱れます。もちろん、その他のバグもあります。
知識を広げる: -webkit-overflow-scrolling: touch とは?
これは MDN で定義されています:
-webkit-overflow-scrolling プロパティは、要素がモバイル デバイスでスクロール バウンス効果を使用するかどうかを制御します. auto: 通常のスクロールを使用します。指がタッチ スクリーンから離れると、スクロールはすぐに停止します. touch: リバウンド効果のあるスクロールを使用します。指をタッチ スクリーンから離すと、コンテンツは一定時間スクロール効果を維持し続けます。継続的なスクロールの速度と持続時間は、スクロール ジェスチャの強度に比例します。また、新しいスタック コンテキストを作成します。
3. iOS キーボードが起動し、キーボードを離した後、ページが元の位置に戻りません。
[問題] コンテンツを入力した後、ソフト キーボードがポップアップし、ページ コンテンツが全体的に上に移動するが、キーボードを離すとページ コンテンツが下にスライドしない
[分析] 位置が固定されている要素が要素内の入力ボックスにフォーカスされると、ポップアップするソフト キーボードが場所を占有します. フォーカスが失われると、ソフト キーボードは消えますが、場所を占有し、入力を引き起こします.フォーカスが外れるとイベント発生
[解决办法]
<div class="list-warp">
<div class="title"><span>投·被保险人姓名</span></div>
<div class="content">
<input class="content-input"
placeholder="请输入姓名"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"/>
</div>
</div>
changeBlur(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}
知識を広げる: 位置: 固定要素は ios にあり、キーボード、特にサードパーティのキーボードを片付けると押し上げられます
4. Android ポップアップ キーボードがテキスト ボックスを覆う
【問題点】Android WeChat H5でソフトキーボードがポップアップし、入力ボックスがブロックされる 下の左の写真がキーボードの起動を想定したときの様子、右の写真が実際のキーボードの様子 【 】フォーカスイベントの追加input と textarea タグ
には解决办法、次のように、最初に正しいかどうかを判断します Android フォンでの操作はもちろん、モデルを判断する必要はありません Document オブジェクトのプロパティとメソッド、 setTimeout を呼び出すため、0.5 秒遅れますAndroidのキーボードは少し遅いので、処理が遅れていなければスクロールは無効
changefocus(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if(isAndroid){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
}, 500);
}
},
知識を広げる:
Element.scrollIntoView() メソッドは、現在の要素をブラウザ ウィンドウの表示領域にスクロールします。Element.scrollIntoViewIfNeeded() メソッドは、ブラウザ ウィンドウの表示領域にない要素をブラウザ ウィンドウの表示領域にスクロールするためにも使用されます。ただし、要素が既にブラウザー ウィンドウの表示領域内にある場合、スクロールは発生しません。
5. Vue でのルーティングはハッシュモードを使用している WeChat H5 ページ共有を開発する場合、Android では共有が正常に設定されているが、ios での共有は異常です
【問題点】 iosの現在のページを友達と共有するのにクリックするのが普通なのですが、2回共有するとトップページにジャンプしてしまい、vue routerを使って2番目のページにジャンプして共有すると共有設定に失敗してしまいます; 上記の Android 共有はすべて通常
[分析] jssdk はバックエンドで署名され、フロントエンドで検証されますが、場合によってはクロスドメイン、ios は共有後に from=singlemessage&isappinstalled=0 などのパラメーターを自動的に取得します. 共有 Moments のパラメーターはシステムによってパラメータが違うようです 違いますが、URL
【解决办法】を取得するたびに以下のパラメータを取得することはできませ
ん (1) ページ this.$router.push を使用して、ウィンドウにジャンプできますルーティング ジャンプを使用する代わりに .location.href を使用すると、アドレス バーのアドレスが現在のページのアドレスと同じになり、正常に共有できます (共有に適したページが多くない場合は、それを使用します)。単一のページなので、ページを更新してジャンプするか、または...) (2) エントリの
アドレスをローカルに保存し、署名を取得する必要がある場合はそれを取り出します。単一のアプリケーションを最初に入力するときにのみ保存してください。【この方法は未検証】
オフトピック: 小さなプログラムで書かれたページを使用できる場合は、小さなプログラムを使用してみてください. H5 開発では、ソフト キーボードを呼び出すことができないため、WeChat 開発者ツールでページ効果を見たときに問題が発生しない場合があります. 頻繁なオンライン公開を避けるために、ピーナッツ シェルまたは idcfengye を使用してイントラネットに侵入し、ドメイン名でアクセスできる開発環境の h5 ページを構築し、携帯電話でその効果を確認します。 -ブラウザのキャッシュメカニズム。送信したばかりのコード (特に js) が有効になるまでに約 30 分かかります。