携帯電話のモバイル端末のレイアウト、ページの高さがイジェクトされたキーボードが突き上げられます

今日は携帯電話のモバイル端末でよく見られる小さな問題を共有します.私が実際のプロジェクトで穴を開けた問題でもあります.
ここ数年来、モバイル端末の開発はますます重要になっており、合格したフロントエンド開発者として、皆さんは多かれ少なかれモバイル端末のページを書いたことがあると信じています.
では、皆さんがエンドポイントを移動してinput入力ボックスをクリックしたときに、ページ全体の高さが携帯電話でポップアップされたキーボードに突き上げられたかどうか分かりません.それによって、いくつかの位置決めの要素も変わりました.もしあなたの問題が解決したら、おめでとうございます.まだ出会っていないか、まだ解決していない若者たちに出会ったら、私が使っている方法を見てみましょう.
まず、アンドロイドとアップルの各画面のサイズが異なるため、remと一緒にページ全体を構築し、ページ全体の高さを100 vhで設定しました.ページがどの画面にあっても適切に表示されるようにします.
コードは次のとおりです.

	var pixclPatio = 1 / window.devicePixelRatio;
	document.write('');
			
	var html = document.getElementsByTagName('html')[0];
	var pageWidth = html.getBoundingClientRect().width;
	html.style.fontSize = pageWidth / 16 + 'px';

ページにinput入力ボックスがあり、下部にcss 3アニメーションが必要なので、全体のアニメーション要素をbody下部を参照点として子絶父相の位置決めを行います.
その結果、ページ全体の効果を完了し、携帯電話でテストすると、入力ボックスをクリックするとページ全体の高さがポップアップされたキーボードが突き上げられ、私のアニメーションの位置も変更され、input入力ボックスを直接上書きしました.
そしてネットで検索したところ、直接高さを決めるという人もいましたが、携帯電話のサイズを合わせる必要があるので通じません.
ページの高さ$(document)をjsで直接取得するという説もある.height();この方法は実行可能であるはずなので、私は試し続けました.結果、この方法はドキュメント全体の高さを直接取得するため、
だから直接高さが基準を超えたので、やはりだめです.
本人が机転したほうがいいです.できる以上、高さが大きすぎるだけで、私は$(window)を使うことができますか.height();現在表示されている領域のサイズを表します.
コードは次のとおりです.

var hrt = $(window).height(); //             hrt    。
console.log(hrt);
window.onload=function(){ //          
	$('body').height(hrt+'px'); //            body
}; 	

最後に、ページの高さがキーボードに突き上げられる問題を完璧に解決し、アンドロイドアップルは有効です.