Vue project, how to achieve barrier-free reading on PC and mobile H5

1. PC side

Proceed as follows:

1. In the head tag of the html page, add the following sentence:

<a title="无障碍通道" href="javascript:;" onclick="ShowDetail()" accesskey="g" onmousedown="ShowDetail()" target="_self">进入无障碍通道</a>

2. At the end of the body tag, add:

        <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>

3. https://gitee.com/tywAmblyopia/ToolsUIDownload barrier-free source code in Code Cloud

4. Place the canyou file in the downloaded file into the public folder in the Vue project
   
   

5. Run the project, click "Enter Barrier-free Channel", and the barrier-free bar will appear.
   

2. Mobile terminal

1. Enter https://www.rrbay.com/tools/wzatool-mobile.htmlpage

2. According to the requirements, enter the domain name and obtain the script code (key point: change min in the script code to max)

3. Put the script code into the body
   

4. result:
   

Encountering bugs:

There is a slight problem with the "zoom in" function on the mobile side. Its implementation principle is to add font-size to each DOM element on the page. Every time you click, the font-size value adds 0.1 rem. The minimum is 1,4rem and the maximum is 1.9 rem. So there will be a problem, that is, when you click on the largest font, click again, you will return to the font-size: 1.4rem style, and it will not return to the original initially displayed font style size. And his enlarged font makes the font too large, unsightly, and ruins the style.

Click "Enlarge" to add an inline style to the original dom: font-size: 1.4rem:

Original page style:

The style after clicking "Enlarge":

Solutions

My personal thoughts are:

1. Calculate the font-size used by the original page (assumed to be X px here),
2. Bind an event to the "zoom in" button, and set the inline style font-size size (assumed to be Y px) to the html after clicking it, because the base value of rem is the font-size size of the html root element.
3. The relationship between X and Y is as follows: Y * 1.4 = X. At this time, click the "Enlarge" button. When the font-size is 1.4rem, it can be changed back to the original page size.

Problems:

1. The font-size of each part of the original page is not necessarily the same, such as the title and body. After modification by this method, the size of the title and body will become the same.
2. In addition, the size of the "accessibility bar" will also change due to changes in the html font-size size ( solution : 1. Use px to write the size of the "accessibility bar", 2. Fix the parent element of the "accessibility bar" font-size, the style unit of the accessibility bar uses em. In fact, both methods are hard-coded in the style size of the "accessibility bar" ).

PS : If anyone has a better method, you can mention it in the comment area so that everyone can learn from it. I would be very grateful. Good people will have a safe life! ! !