iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件

最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがあります。Android版WeChatではページ表示は正常ですが、iOS版WeChatでは予期せぬバグが発生しています。今回は、iOS のモバイル H5 ページのラバーリバウンド (輪ゴム効果) 問題を主に記録し、同様の問題に遭遇した学生の役に立ちたいと考えています。

🐕解決策1: inobounce.jsを使用する

inobounce.js github アドレス

つまり、HTML メインページのヘッダータグに inbounce.js を導入します。このファイルが導入されると、iOS 上のページ全体をスライドまたはスクロールできなくなります。スクロール要素でスクロール効果を実現したい場合は、スクロール領域に固定の高さ、つまり height、max-height を設定し、さらにページスライドを実現するために overflow: auto を設定する必要があります。 iOS でページのスクロールがフリーズするのを防ぐには、スクロール領域に -webkit-overflow-scrolling: touch プロパティを設定する必要があります。

<!DOCTYPE html>
<html lang="ja">
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
		<title>イノバウンス</title>
		<script src="inobounce.js"></script>
		<スタイル>
			ul {
				高さ: 115px;
				境界線: 1px の灰色
				オーバーフロー:自動;
				-webkit-オーバーフロースクロール: タッチ;
			}
		</スタイル>
	</head>
	<本文>
		<ul>
			<li>リスト項目 1</li>
			<li>リスト項目 2</li>
			<li>リスト項目 3</li>
			<li>リスト項目 4</li>
			<li>リスト項目 5</li>
			<li>リスト項目 6</li>
			<li>リスト項目 7</li>
			<li>リスト項目 8</li>
			<li>リスト項目 9</li>
			<li>リスト項目 10</li>
		</ul>
	</本文>
</html>

🐒 解決策 2: CSS スタイル処理 (推奨)

偶然、iOS 側でいくつかのパブリックアカウントの H5 アクティビティページを開いたところ、いわゆるラバーリバウンド効果は見られませんでした。そこで、この効果を利用して、iOS Web ページで発生するラバーリバウンド効果を解決できるのではないかと考えました。最後に、この方法を使用すると、ゴムの反発効果を発生させずに iOS 上のページを修正できます。ラバーバンド効果は、システムバージョン iOS13+ のデバイスでは解決されています。システムバージョン iOS12+ のデバイスではテストされていません。iOS12+ を搭載した Apple の携帯電話を見つけてさらにテストし、テスト結果を補足する予定です。

<!DOCTYPE html>
<html lang="ja">
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
		<title>iOS 消しゴムの復活</title>
	</head>
	<本文>
		<!-- コンテンツエリア -->
		<div id="アプリ"></div>
	</本文>
</html>

メイン CSS コード:

/* 初期化 */
* {
	マージン: 0;
	パディング: 0;
}
/* 基本スタイル */
html,
体 {
	幅: 100%;
	高さ: 100%;
	オーバーフロー: 非表示;
}
体 {
	ボックスのサイズ: 境界線ボックス;
	位置: 相対的;
}
/* 範囲外にスクロール */
＃アプリ {
	幅: 100%;
	高さ: 100%;
	オーバーフロー-y: 自動;
}

🐬概要:

一般的に、私は実際の開発で両方のソリューションを試しました。解決策 1 は、WeChat で H5 Web ページを閲覧する際のゴムの反発効果を完全に解決できます。iOS WeChat で H5 ページがジャンプすることを許可されると、下部にナビゲーションバーが表示されます。このとき、ナビゲーションバーも覆われている可能性があり、ナビゲーションバーの両端のボタンをクリックしても反応しません。 Safari で H5 ページを開くと、Web ページの上部にあるアドレスバーと下部にあるメニューバーがある程度ブロックされ、エクスペリエンスがあまり理想的ではありません。最終的に、この解決策は承認されました。ソリューション2は私が実際の仕事で使用しているもので、リバウンド効果が一定程度改善されました。ソリューション1と比較して、体験効果が大幅に向上しました。

ページに WeChat の権限があり、ページパスがジャンプする場合、iOS 上の WeChat で開かれた Web ページの下部に追加のナビゲーションバーが表示されます。同様に、Android 上の WeChat には同様のナビゲーションバーは表示されません。 WeChat 認証とページジャンプがない場合は、両方のソリューションはオプションです。WeChat 認証がある場合は、ソリューション 2 を使用することをお勧めします。

iOS WeChat H5ページの消しゴムリバウンド効果に関するこの記事はこれで終わりです。iOS WeChat H5ページの消しゴムリバウンドに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

<<: vsftpdで仮想ユーザーログインを設定する方法

>>: 既存のMySQLデータベースの文字セットを統一する方法