H5横竖屏适配代码，强制横屏

野性酷女 2023-06-13 06:24 15阅读 0赞

1、强制横屏代码，检测用户屏幕方向，竖屏时提示用户将屏幕翻转

<style>
        @media all and (orientation: portrait) {
            html, body {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
    
            html::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: #333;
                z-index: 99999;
            }
    
            html::after {
                content: "\4E3A\4E86\66F4\597D\7684\4F53\9A8C\FF0C\8BF7\5C06\624B\673A\6A2A\8FC7\6765";
                position: absolute;
                top: 30%;
                left: -15%;
                height: 30px;
                width: 100%;
                margin-top: 30px;
                z-index: 99999;
                text-align: center;
                font-size: 16px;
                color: #fff;
            }
    
            body::before {
                content: "";
                position: absolute;
                z-index: 99999;
                height: 200px;
                width: 100px;
                left: 35%;
                top: 30%;
                margin: -160px 0 0 -50px;
                color: #fff;
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAwMjcwNkVEQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDAwMjcwNkREQzczMTFFNjlFMDFGQTEzNkM3N0JBMTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ0NzhCMTlBREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ0NzhCMTlCREM1ODExRTZCNTdFRjQ0Q0I1QzRCODZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J30rNQAACRRJREFUeNrsXQlsFVUU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");
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 100px auto;
            }
        }
    
    </style>

2、自动横屏，当手机竖屏时，内容横屏，引导用户自己将手机横屏；

首先现在要适配的页面外层包裹一个div ,id设置wrapper，再讲下面代码复制过去即可

var detectOrient = function () {
        var width = document.documentElement.clientWidth
        var height = document.documentElement.clientHeight
        var $wrapper = document.getElementById("wrapper")
    
        style = "";
        if (width >= height) { // 横屏
          style += "width:" + width + "px;";
          style += "height:" + height + "px;";
          style += "-webkit-transform: rotate(0); transform: rotate(0);";
          style += "-webkit-transform-origin: 0 0;";
          style += "transform-origin: 0 0;";
        }
        else { // 竖屏
          style += "width:" + height + "px;";
          style += "height:" + width + "px;";
    
          style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
          style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
          style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
    
        }
        $wrapper.style.cssText = style;
      }
      window.onresize = detectOrient;
      detectOrient();

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关手机强制横屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 页面窗口自动调整到设备宽

谁践踏了优雅/ 2023年10月17日 19:11/ 0 赞/ 27 阅读

相关 Android应用开发横竖屏切换的生命周期，以及横竖屏的适配

内容简介：在移动设备上进行应用开发时，要考虑用户体验。横屏和竖屏的切换在Android设备上，经常令程序员无法适从，本节来试图适配Android应用程序中的横竖屏切换，

冷不防/ 2023年10月17日 12:03/ 0 赞/ 59 阅读

相关 H5横竖屏适配代码，强制横屏

1、强制横屏代码，检测用户屏幕方向，竖屏时提示用户将屏幕翻转 <style> @media all and (orientation: portra

野性酷女/ 2023年06月13日 06:24/ 0 赞/ 16 阅读

相关 php强行横屏,强制横屏app

强制横屏app是一款专为手机用户打造的控制屏幕方向转动的软件。现在很多手机设备上面都有可以转动屏幕方向的设置，但是有一些手机还是没有添加这种功能，那么这个时候你就非常需要这款软

缺乏、安全感/ 2023年01月17日 10:52/ 0 赞/ 181 阅读

相关移动端H5强制页面横屏展示

接到一个H5小游戏的需求，需要强制H5横屏显示；大概效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

小咪咪/ 2022年12月27日 02:15/ 0 赞/ 695 阅读

相关 ipad横竖屏切换，页面适配方法

如果想始终横屏展示给用户，方法有很多，我也来写几种吧： 1.简单粗暴型：当ipad竖屏的时候，给一个蒙层提示，让客户不得不进行横屏操作 // ipad竖屏适配

朱雀/ 2022年05月19日 01:19/ 0 赞/ 677 阅读

相关横竖屏的转换及页面适配

横竖屏的转换，既可以手动操作实现，也可以自动旋转设备实现。情况1：APP项目所有页面既支持横屏，又支持竖屏。在项目配置中设置了支持横竖屏，则不需要对视图等做过多的配

怼烎@/ 2022年05月15日 13:39/ 0 赞/ 309 阅读

相关 LayaAir 屏幕适配-横屏与竖屏

目录屏幕方向 screenMode=none screenMode=horizontal screenMode=vertical 横竖屏切换代码 --------

我会带着你远行/ 2022年04月10日 04:41/ 0 赞/ 611 阅读

相关 cordova app强制横屏，config.xml配置横屏

cordova app强制横屏，config.xml配置横屏配置代码： <preference name="Orientation" value="lan

绝地灬酷狼/ 2021年10月19日 11:32/ 0 赞/ 612 阅读

相关 Android 适配语言、屏幕、图片、横竖屏、版本

目录一、适配国家语言（1）手机系统语言适配（2）应用切换语言二、屏幕适配（1）图片适配（2）、XML布局适配（3）、横竖

Bertha 。/ 2021年09月12日 03:58/ 0 赞/ 582 阅读