異なるiosデバイスでのh5ページの詳細 問題点まとめ

最近アプレットウェブビューに埋め込まれたh5のページを書いて、記事のコメント機能、プロセスは、互換性の問題の多くが発生し、異なるモデル上のパフォーマンスも非常に矛盾しているので、次の問題をまとめ、将来の視聴のために記録されます。

1. 日付の問題

yyyy-mm-dd hh:mm:ss のフォーマットはiosでは認識されません。

ブラウザ側では問題なく処理されますが、モバイル側ではNAN（null）となり、この場合、iosのシステムはこのタイプの時間を変換することができないのです。

let date = new Date('2019-02-28 18:33:24'); // null`

解決策は、yyyy/mm/dd hh:mm:ss 形式に変換するだけです。

replace(/\-/g, "/")

2. キーボードがしまる、ページが動かない、落ちない

ios12で、キーボードをしまっていると、ページがメインで固まって、下に空白ができ、ページを少し動かすと再開することがわかりました。

この問題の解決策をウェブで調べてみると、おおよそ、ブラーイベントでページが少しスクロールするようになる

window.scrollTo(0, scroll);

しかし、深刻な問題があります。例えば、コメント入力ボックス＋公開ボタンのように、ページ上に操作が必要なボタンがある場合、テキストを入力して "publish" をクリックすると、クリックイベントが発生すると、まずページがblurイベントを起こし、キーボードが後退して、すべてが終了してしまうのです。

解決方法 clickイベントをontouchstartに置き換えることで、問題を解決します。ontouchstartイベントは、clickイベントのトリガーよりも優れています。

3、ios12でWeChatアプレットウェブビュー、キーボードの後退は、ページの下部には、白いままになります。

この問題は、ページのスクロールが自動に設定されていることが原因であることが疑われています

4. iphoneの修正がうまくいかず、一部のマシンでtextareaのカーソルがずれてしまう。

解決方法 兄弟要素はすべて絶対化し、親要素は overflow:auto とする。

Parent element.
height: 100vh;
  position: relative;
  overflow: auto;
  
Sibling element.
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: visible;
  overflow-y: auto;
  padding-bottom: 10px;
  z-index: 1

5. キーボードで入力ボックスが見えない

入力ボックスが下部に固定されている場合、キーボードを上げると、iphoneでは固定が失敗し、入力ボックスがページと一緒にスクロールしてしまい、機種によっては入力ボックスがキーボードに隠れてしまうことがあり、たまにある問題で非常に不親切です

解決策 固定レイアウトを放棄し、ページにスクロールがある場合はアブソリュートレイアウトを放棄します。

フレックスレイアウトを使用することをお勧めします。

もちろん、これらの問題が発生した場合は、製品設計に無理があるということですので、必要であれば、キーボードで入力がジャマにならないような設計に変更する必要があります。これらの互換性ソリューションは、すべての機種に完璧に対応できるものではありません。

この記事がお役に立てれば幸いです。また、Scripting Houseを応援していただければ幸いです。