1.パソコン側
次のように進めます。
- HTMLページのheadタグに次の文を追加します。
<a title="无障碍通道" href="javascript:;" onclick="ShowDetail()" accesskey="g" onmousedown="ShowDetail()" target="_self">进入无障碍通道</a>
- body タグの最後に次を追加します。
<script type="text/javascript">
function ShowDetail() {
if (window.top.document.getElementById("rrbay_wzatool")) {
return false;
}
var url = "?url=" + document.location.href;
window.scrollTo(0, 0);
location_href('/canyou/index.html' + url);
}
function location_href(url) {
location.href = url }
</script>
-
Code Cloud で
https://gitee.com/tywAmblyopia/ToolsUIバリアフリー ソース コードをダウンロードする -
ダウンロードしたファイル内のcanyouファイルをVueプロジェクトのパブリックフォルダに配置します。
-
プロジェクトを実行し、「バリアフリーチャンネルに入る」をクリックするとバリアフリーバーが表示されます。
2.モバイル端末
-
https://www.rrbay.com/tools/wzatool-mobile.htmlページに入る -
要件に従って、ドメイン名を入力し、スクリプト コードを取得します(重要な点: スクリプト コードの min を max に変更します)。
-
スクリプトコードを本文に入れます
-
結果：
バグに遭遇:
モバイル側の「ズームイン」機能には若干の問題があります。その実装原則は、ページ上の各 DOM 要素に font-size を追加することです。クリックするたびに、font-size の値は 0.1 レムずつ追加されます。最小値は 1,4 レム、最大は 1.9 レムです。したがって、最大のフォントをクリックして再度クリックすると、font-size: 1.4rem スタイルに戻り、最初に表示されていた元のフォント スタイル サイズに戻らないという問題が発生します。そして、フォントを拡大すると、フォントが大きすぎて見苦しくなり、スタイルが台無しになります。
「拡大」をクリックして、元の dom: font-size: 1.4rem: にインライン スタイルを追加します。
元のページのスタイル:
「拡大」をクリックした後のスタイル:
ソリューション
私の個人的な考えは次のとおりです。
- 元のページで使用されているフォント サイズ (ここでは X ピクセルと仮定します) を計算します。
- イベントを「ズームイン」ボタンにバインドし、ボタンをクリックした後にインライン スタイルのフォント サイズサイズ (Y ピクセルと仮定) を HTML に設定します。これは、rem の基本値が HTML ルートのフォント サイズ サイズであるためです。要素。
- XとYの関係はY * 1.4 = Xこのとき「拡大」ボタンをクリックすると、フォントサイズが1.4remの場合は元のページサイズに戻すことができます。
問題点:
- タイトルと本文など、元のページの各部分のフォントサイズは必ずしも同じではありませんが、この方法で変更するとタイトルと本文のサイズが同じになります。
- また、HTMLのフォントサイズの変更により「アクセシビリティバー」のサイズも変わります（解決策：1.「アクセシビリティバー」のサイズをpxで記述する、2.「アクセシビリティバー」の親要素を修正する） "アクセシビリティ バー" のフォント サイズ、アクセシビリティ バーのスタイル ユニットは em を使用します。実際、両方のメソッドは "アクセシビリティ バー" のスタイル サイズでハードコーディングされています。
PS : 誰かがより良い方法を持っている場合は、誰もがそれから学ぶことができるように、コメント エリアで言及していただければ幸いです。善良な人々は安全な生活を送れます。！！