如何利用JS代码区判断是否是大小屏,小屏则内容充满整个屏幕,大屏则内容居中显示

JavaScript06

如何利用JS代码区判断是否是大小屏,小屏则内容充满整个屏幕,大屏则内容居中显示,第1张

不用js,css也可以。

// 大屏幕,当屏幕宽度等于641px或者大于641px的时候

@media screen and (max-width: 641px) {

    .container { width: 640px margin: 0 auto }

}

// 小屏幕,当屏幕最大宽度600px或者小于600px的时候

@media screen and (max-width: 640px) {

    .container { width: auto margin: 0 }

}

js的话,判断一下window.innerWidth

var ww = window.innerWidth

if (ww < 640) {

    document.documentElement.setAttribute('class', 'container-mobile')

} else {

    document.documentElement.setAttribute('class', 'container')

} .container { width: 640px margin: 0 auto }

.container-mobile { width: auto margin: 0 }

<script language="JavaScript">  

<!-- Begin  

function redirectPage() {  

var w=screen.width

var h=screen.height

alert("经系统检测,你的屏幕分辨率为 " + w+"*"+ h )  

}  

// End -->  

</script>