SoFunction
Updated on 2025-04-11

Code examples for Vue to realize horizontal screen effect on mobile phones

css horizontal and vertical screen

Sometimes some pages hope to achieve horizontal screen effect on your phone, such as playing pages, so we create the following css

.mobile-landscape-container {
  @media screen and (orientation: portrait) {
    position: absolute;
    width: 100vh;
    height: 100vw;
    top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
  }
  @media screen and (orientation: landscape) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
}

Then use the css for this page. In this way, browsing on your phone will find that the page is in a horizontal screen effect. Even if the automatic screen reversal is turned on, the horizontal screen effect will still be maintained after the screen reversal.

Note that after using this style, internal components cannot use vw and vh, because these two properties are reversed. If you continue to use it, it will cause a page structure error.

But there is a problem, that is, if the PC browser is reduced to a height larger than a width, the page will also be switched, and the effect is not very good. Therefore, you can determine whether it is a mobile phone and set this style only on the mobile terminal.

There are two ways to achieve:

  • By vue:classTo determine whether it is a mobile phone, then add this style.
  • Through cssmax-device-widthandmax-device-heightLet's make a judgment.

CSS judges mobile terminal

max-device-widthandmax-device-heightandmax-widthandmax-height, they are not affected by the window size, that is, the width and height of the device screen are fixed values. The PC-side resolution starts at 800x600, and the current browser resolution of mobile devices will not exceed this value.

Note that the screen resolution of the mobile terminal is different from the browser resolution, and the browser resolution is much smaller, because the current pixel density of mobile phones is greater than 1.

So we can passmax-device-widthandmax-device-heightTo determine whether it is a mobile terminal, for example:

/*Define vertical screen css*/
@media screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px) {
}
/*Define horizontal screen css*/
@media screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {

In this way, we add the above stylemax-device-widthandmax-device-heightThis can make it effective only on the mobile side and not affect the PC side.

html5 horizontal screen

The above method achieves the forced horizontal screen effect, but note that the phone is actually in a vertical screen state. If there is input interaction at this time, the keyboard is still in a vertical screen. . . So this only applies to pages without keyboard interaction, such as video playback pages.

So is there any way to get the browser to enter the horizontal screen state by itself (just like in the APP), html5 provides an API:

("landscape-primary");

But note that this API must be in full screen state to be effective, that is, it must be();or()After executionlockfunction.

At the same time, because full screen requires user interaction, the best way is to have a full screen button, and when clicked, you can switch to horizontal screen. This way the keyboard is also a keyboard in a horizontal screen state.

But note:

  • requestFullscreen is not valid on iOS (screenfull is the same), so it doesn't work on iOS either
  • Although requestFullscreen is effective in the built-in browser of WeChat, it is invalid, which means it can be full screen but cannot be horizontally screened.

This is the article about Vue's code examples to realize the horizontal screen effect of mobile phones. For more related content on Vue's mobile phones, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!