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

JavaScript018

如何利用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>

<script type="text/javascript">function getInfo(){

var s = ""

s += " 网页可见区域宽："+ document.body.clientWidth+"\n"

s += " 网页可见区域高："+ document.body.clientHeight+"\n"

s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n"

s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"\n"

s += " 网页正文全文宽："+ document.body.scrollWidth+"\n"

s += " 网页正文全文高："+ document.body.scrollHeight+"\n"

s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"\n"

s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"\n"

s += " 网页被卷去的左："+ document.body.scrollLeft+"\n"

s += " 网页正文部分上："+ window.screenTop+"\n"

s += " 网页正文部分左："+ window.screenLeft+"\n"

s += " 屏幕分辨率的高："+ window.screen.height+"\n"

s += " 屏幕分辨率的宽："+ window.screen.width+"\n"

s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n"

s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n"

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n"

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n"

alert (s)

}

getInfo()

</script>