according to my observation, because other native interfaces (such as input box pop-up keyboard, etc.) are involved, it is not advisable to switch directly to horizontal display, such as using css transform , and so on.

you can judge whether the current is displayed horizontally or vertically . If the screen is vertical, the user must be displayed on the landscape screen to get the best experience. Let the user choose the horizontal screen. This practice seems to be more common.

(in addition: if it is a webview page, you can directly let ios or android developers force the webview page to be displayed horizontally)

refer to Tencent's activity page
js file

<img src="' + _this.option.pic + '" id="' + _this.option.prefix + '-landscape-pic" style="display:inline-block;" /><span>' + _this.option.txt + '</span></div>';
            document.body.appendChild(landscapeDom);
            var img_url = _this.pic;
            var img = new Image();
            img.src = _this.option.pic;
            img.onload = function() {
                document.getElementById(_this.option.prefix + '-landscape-pic').width = parseInt(img.width / _this.option.picZoom);
                document.getElementById(_this.option.prefix + '-landscape-pic').height = parseInt(img.height / _this.option.picZoom)
            }
        }
        createCss();
        createDom();

        var landNode = document.getElementById(_this.option.prefix + '-landscape');
        var optionMode = option.mode ? option.mode : _this.option.mode;
        var winW = document.documentElement.clientWidth || window.innerWidth;
        var winH = document.documentElement.clientHeight || window.innerHeight;
        var initOrientation = winW > winH ? 'landscape' : 'portrait';
        var isOrientationReload = initOrientation == optionMode ? false : true;
        if (initOrientation != optionMode)
            landNode.style.display = 'block';
        else
            landNode.style.display = 'none';

        var updateOrientation = function() {
            document.activeElement.blur();
            var orientation = window.orientation;
            switch (orientation) {
            case 90:
            case -90:
                orientation = 'landscape';
                break;
            default:
                orientation = 'portrait';
            }
            if (orientation != optionMode)
                landNode.style.display = 'block';
            else
                landNode.style.display = 'none';
        }
        window.addEventListener('DOMContentLoaded', function() {
            window.addEventListener('orientationchange', function() {
                if (isOrientationReload) {
                    location.reload(true);
                }
                updateOrientation();
            }, false);
        }, false);
    },
    _stopScroll: function() {
        event.preventDefault();
    },
    //
    disableScroll: function() {
        document.body.addEventListener('touchmove', this._stopScroll, {
            passive: false
        });
    },
    //
    enableScroll: function() {
        document.body.removeEventListener('touchmove', this._stopScroll);
    },
    //
    dialogAction: function(option) {
        var ths = this;
        var opt = {
            'rootEle': '-sharppageContainer',
            'wrapClass': '.mod-dialog-wrap',
            'openClass': '.j-openDialog',
            'closeClass': '.j-closeDialog'
        };
        for (var k in option)
            if (option[k] != '')
                opt[k] = option[k];

        $(opt.rootEle).on('click', opt.openClass, function() {
            var dg = $('-sharp' + $(this).data('dialogid'));
            dg.show().addClass('show');
            if (dg.data('scroll') != 'scroll')
                ths.disableScroll();
        }).on('click', opt.closeClass, function() {
            var dg = $(this).closest(opt.wrapClass);
            dg.removeClass('show');
            if (dg.data('scroll') != 'scroll')
                ths.enableScroll();
        });
    }
};

$(function() {
    GYST.dialogAction({});
});