html中横屏的代码是什么_随笔

html本身是无法判断是否是横屏还是竖屏的，基本是靠css和javascript来实现的。其中css的话一般使用media query，javascript的话，基本上就是根据屏幕的长和宽来判断屏幕是横屏还是竖屏。

通过使用HTML5的 Screen Orientation API, 可以在JavaScript定义屏幕方向。

所以用JS实现：

在页面加载完成后获取浏览器高度以及宽度，再设置VIDEO元素高度宽度即可。

function resizeBody() {

var bodyHeight = document.documentElement.clientHeight

$("#Flash1").height(bodyHeight + "px")

$("body").height(bodyHeight + "px")

}

$(function () {

resizeBody()

})

</script>

附上HTML5中如何判断横屏竖屏：

1.首先在head中加入如下代码：

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明：

1)content中的width指的是虚拟窗口的宽度。

2)user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

3)initial-scale=1.0 初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。

4)手机页面可以触摸移动，但是如果有需要禁止此 *** 作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5)如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

2.判断横屏竖屏：

1》CSS判断横屏竖屏：

写在同一个CSS中：

@media screen and (orientation: portrait) {

/*竖屏 css*/

}

@media screen and (orientation: landscape) {

/*横屏 css*/

}

分开写在2个CSS中：

竖屏

href="portrait.css">

横屏

href="landscape.css">

2》JS判断横屏竖屏：

//判断手机横竖屏状态：

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {

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

{ alert('竖屏状态！') }

if (window.orientation === 90 || window.orientation === -90 )

{ alert('横屏状态！') } }, false)//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听：

监控窗体变化来实现监控手机屏幕横竖

@media screen and (orientation:portrait) {

css[竖向定义样式]

}

@media screen and (orientation:landscape) {

css[横向定义样式]

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6133260.html

html中横屏的代码是什么

发表评论

评论列表（0条）