2022 opening H5 mobile page special effects

In the twinkling of an eye ,2022 Has come quietly ; Because I have been busy with the iteration and... Of a medium-sized project recently AR The launch of the project , Have been N I haven't published any technical articles for a long time ; The last one was last year Iot Introduction to the development of the development board sent by the students . Let's talk about it today H5 Special effects of mobile page ; all 2022 Return year H5？ Can't H5 It's so popular , In particular, wechat has opened the external connection H5 It's important again . So let's talk about the recent development H5 Some of the experience .

1、 Mobile phone horizontal and vertical judgment

Mobile phones are the first in the world , Now mobile phones are basically 70% The carrier of （ The rest of the pad Slightly ）; One problem is that the length, width and height of the vertical and horizontal screens are different , It will have an important impact on the overall page layout .

Here is how to automatically determine whether the screen is horizontal or vertical ：

        if ( window.orientation == 180 || window.orientation==0 ) { 
            alert(" Vertical screen "); 
        } else if( window.orientation == 90 || window.orientation == -90 ) {
            alert(" Horizontal screen "); 
        }

This is to enter the page for judgment , If you can judge whether the mobile phone is vertical or horizontal after entering it ？ Of course it can , Go straight to the code ：

        window.addEventListener('orientationchange', function(event) {
            if ( window.orientation == 180 || window.orientation==0 ) { 
                alert(" Vertical screen "); 
            } else if( window.orientation == 90 || window.orientation == -90 ) {
                alert(" Horizontal screen "); 
            }
        });

2、 Turn to the whole page

Judge whether it is horizontal or vertical , Sometimes it can be handled by different layouts , But it takes a lot of energy , Because it needs to be done. 2 Set layout ; So I came up with a function to flip through the mirror image , Of course, I haven't applied this function yet . I used it anyway 2 Set layout processing .. tired . Here is the code for image flipping , It's simple, just in CSS Add in .

body {
    -webkit-transform: rotate(90deg);
}

So the whole page will turn clockwise 90°.. What's the role ？ Existence is reason , It will be used in the future .

3、 Gravity induction of mobile phone and application of gyroscope

Now I can H5 Most of them are smart phones , Generally, it is equipped with gravity induction and gyroscope ; What about this 2 What's the use of one ？ It can sense the angle and speed of the mobile phone . for instance ： Shaking is actually used here 2 The data of two . This has an open source component Parallax.JS【http://matthew.wagerfield.com/parallax/】 I will not explain here , If you are interested, you can leave a message or go to see it yourself , I've also used this , I feel it is easy to start and realize ..

Let's say one last thing , Small H5 Apply directly to jq or jq mobile... Good maintenance ; Of course it's popular now VUE It's OK , But the feeling vue A little wide .. See what people think .