html5 自动横屏,h5页面怎么固定横屏且100%展示?

最新推荐文章于 2024-09-06 17:11:11 发布

黄浴

最新推荐文章于 2024-09-06 17:11:11 发布

阅读量957

点赞数

响应式设计 CSS 媒体查询网页布局屏幕旋转

关键词由CSDN通过智能技术生成

你复制过去看一下吧，好多方面的影响，我也不好跟你说：

test2

html {

font-size: 100px;

margin: 0;

padding: 0;

font-family: '微软雅黑',Arial,Helvetica,'microsoft yahei',sans-serif;

background: #f2f2f2

}

* {

margin: 0;

padding: 0

}

body {

font-size: 12px;

color: #333

}

.main {

background-color: #999;

}

p {

line-height: 30px;

font-size: 16px

}

.title {

font-size: 24px;

line-height: 40px;

text-align: center;

background-color: #fff

}

@media screen and (orientation: portrait) {

.main {

-webkit-transform:rotate(90deg);

-moz-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

width: 100vh;

height: 100vh;

overflow: hidden;

}

@media screen and (orientation: landscape) {

.main {

-webkit-transform:rotate(0);

-moz-transform: rotate(0);

-ms-transform: rotate(0);

transform: rotate(0)

}

test

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.

2 2 2 2 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab atque fuga iusto fugiat architecto dicta, repudiandae facere corporis, blanditiis ducimus ratione adipisci praesentium doloremque nulla sit numquam non reprehenderit voluptate.

var width_doc = document.documentElement.clientWidth;

var height_doc = document.documentElement.clientHeight; //文档流的高度

var _width = screen.width;

var _height = screen.height; //屏幕的高度

var orientationFun = function(){

// var width_doc = document.documentElement.clientWidth;

// var height_doc = document.documentElement.clientHeight; //文档流的高度

// var _width = screen.width;

// var _height = screen.height; //屏幕的高度

if (window.orientation == 180 || window.orientation == 0) {

// if(_width<_height>

// alert('body宽高：('+width_doc+','+height_doc+') print容器宽高：('+$('#print').width()+","+$('#print').height()+")");