1. 背景
需要の背景：
アンケートスターと同様のアンケートシステムを開発し、リファクタリングを行いましたが、最初はPC側の開発でしたが 、一番困ったのはIEブラウザの互換性と順応性でした。
その後、プロジェクトマネージャーから、 モバイル端末 の同時開発を依頼されましたが、簡単に言うと、アプリやオフィスシステム、小さなプログラムなどに組み込むためのH5ページを書くというもので、当初は開発とテストが行われました 。 Edge ブラウザシミュレータ 。私も初めてモバイル プロジェクトを開発しているため、経験がありません (後で、IOS には互換性の問題があるため、固定位置の使用は避けるべきだと学びました)。したがって、プロジェクトの開発とデプロイに Jenkins を使用してパッケージ化してデプロイした後、IOS システムの実際の Apple デバイスでテストすると、さまざまな奇妙な問題が発生します。。
最初にして最大の問題は次のとおりです。
1. 入力ボックスにフォーカスがあり 、内容を入力するためにソフトキーボード を呼び出したとき、つまりソフトキーボードをしまった後、ページ全体のレイアウトや組版が崩れてしまい、再度入力ボックスを選択したいとき実際、この時点ではページ全体が外れており、再度フォーカスを選択したい場合は、そのフォーカスをクリックする必要があります。。
2. 解決プロセス
とにかく、それは百度のあらゆる種類、偉人からのあらゆる種類のアドバイスです。
JSBridge : Alipay H5 オープンドキュメント
百度の解決策:
H5 IOS入力にフォーカスがあるとページ全体が上に押し上げられるが、キーボードを閉じてもページが下に移動しないバグを解決
IOSでソフトキーボードを閉じるとページが押し上げられ、元に戻せない究極の解決策
ユニアプリ開発プロジェクト:
上記の奇妙な方法をすべて試しましたが、最終的にはまだ役に立ちません。
3. 解決策
最後に会社の上司に相談したら、基本的にはOKですよ～
-webkit-backface-visibility_Notebooks_Design Academy
結合 ➕ : -webkit-transform: translation3d(0,0,0)
App.vue でグローバルに構成すれば完了です。
(もちろん、Androidシステムに影響を与える可能性があるため、IOSシステム用の属性を追加するかどうかを判断するのが最善です~)
4. 最終コード
<script>
export default {
mounted() {
// 判断是否为IOS系统以添加CSS属性
let u = navigator.userAgent;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isIOS) {
let iosApp = document.getElementById('app');
iosApp.style.backfaceVisibility = 'hidden';
iosApp.style.transform = 'translate3d(0,0,0)';
}
},
};
</script>完璧！！授業後〜