Using js to solve the problem of mobile device adaptation

I remember sharing with you about using media query to solve the problem of mobile device adaptation. As a front-end person, when you need to do mobile devices and use media query for mobile adaptation, I believe you will crash at this time. For small editors, the last thing they want to do is to solve the adaptation problem. Using media query for mobile devices is the most basic idea, but using media query, in many cases, the range of width, as well as devices of different heights under the same width, and other conditions need to be considered. Sometimes there will be conflicts between media queries, and through media query The adaptation of queries requires a long amount of code, so Xiaobian refuses to use it. Sometimes, when the boss talks and has to use it, Xiaobian still uses it tearfully on the edge of crash.
In order to get rid of such a waste of time and brain capacity workload, this paper introduces a way to solve the problem of mobile devices through js, which can greatly reduce the amount of code but still achieve the goal compared with media query. That's all the crap. Just go straight to the code.

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if(width > 768) {
            width = 768;
        }
        var rem = width / 7.5;
        docEl.style.fontSize = rem + 'px';
        docEl.style.fontSize = rem + 'px';
        docEl.style.fontSize = rem + 'px';
    }
    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if(e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})(window);

Finally, I will give you an animation effect of imitating typewriting:
The first method:

<body onLoad="newsFeed()">
            <form name="form1">
                <textarea wrap=physical rows=3 cols=25 name="news2"> 
                </textarea>
            </form>
            <script language="JavaScript">
                function makeArray() {
                    this.length = makeArray.arguments.length
                    for(var i = 0; i < this.length; i++)
                        this[i + 1] = makeArray.arguments[i]
                }
                var fArray = new makeArray;
                fArray[0] = "Shu Yi stands on the stage, her face is at a loss. The water drips down her clothes on the floor. The strange eyes of her classmates make her look like a needle on her back";
                fArray[1] = "water...";
                fArray[2]="Trickle down the clothes on the floor"
                fArray[3] = "The strange eyes of the students beside her make her look like a needle on her back";
                var x = 1;
                var y = 0;
                var msg1 = fArray[y];

                function newsFeed() {
                    if(x == msg1.length + 1) {
                        for(var j = 0; j < 70000; j++);
                        y += 1;

                        if(y > 3) y = 0;
                        document.form1.news2.value = ' ';
                        msg1 = fArray[y];
                        x = 0;
                    }
                    document.form1.news2.value = msg1.substring(0, x);
                    x += 1;
                    setTimeout("newsFeed() ", 300);
                }
            </script>
        </body>

The second method:

<span id="demo"></span>
function fontAnimation(dom, str) {
    var i = 0; //Subscript of current text
    var timer;
    var len = str.length;
    timer = setInterval(() => {
        dom.append(str.charAt(i));
        if(i++ === len) {
            clearInterval(timer);
            timer = null;
            i = 0;
        }
    }, 100);
}
fontAnimation($("#demo"),"dfkajfkafhalfafalja");

Tags: Mobile Javascript

Posted on Fri, 03 Apr 2020 22:55:54 -0700 by yogibear333