javascript - Use H5 technology to implement a barcode similar to WeChat, Alipay, and click full screen and automatically switch to landscape mode?

Question

Just like the title. I developed an APP using H5. Clicking on the QR code has been implemented. How to better implement the barcode clicking to enlarge and horizontal screen?
The effect is similar to Alipay and WeChat’s payment interface

The effect of Figure 3. I didn't do it well. I beg you all to provide elegant implementation methods.

Answer 1

I think we can use the 2D transform rotate (angle) attribute in transform in CSS3 to do it! Let it rotate when you click it

Answer 2

Idea: Detect horizontal and vertical screens => tansform rotate & change font-size
Provide a more detailed horizontal and vertical screen practice, mobile side forced horizontal screen and forced vertical screen solutions

Answer 3

Try searching for this onorientationchange, there may be compatibility issues, the code implementation cannot be explained in a sentence or two, and it may not be the effect you want;