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

JavaScript019

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

Javascript:

IE中:

document.body.clientWidth ==>BODY对象宽度

document.body.clientHeight ==>BODY对象高度

document.documentElement.clientWidth ==>可见区域宽度

document.documentElement.clientHeight ==>可见区域高度

FireFox中:

document.body.clientWidth ==>BODY对象宽度

document.body.clientHeight ==>BODY对象高度

document.documentElement.clientWidth ==>可见区域宽度

document.documentElement.clientHeight ==>可见区域高度

Opera中:

document.body.clientWidth ==>可见区域宽度

document.body.clientHeight ==>可见区域高度

document.documentElement.clientWidth ==>页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==>页面对象高度(即BODY对象高度加上Margin高)

alert(document.body.clientWidth) //网页可见区域宽(body)

alert(document.body.clientHeight) //网页可见区域高(body)

alert(document.body.offsetWidth) //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight) //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth) //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight) //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop) //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft) //网页被卷去的Left(滚动条)

alert(window.screenTop)//浏览器距离Top

alert(window.screenLeft)//浏览器距离Left

alert(window.screen.height) //屏幕分辨率的高

alert(window.screen.width)//屏幕分辨率的宽

alert(window.screen.availHeight) //屏幕可用工作区的高

alert(window.screen.availWidth) //屏幕可用工作区的宽

Jquery

alert($(window).height()) //浏览器当前窗口可视区域高度

alert($(document).height()) //浏览器当前窗口文档的高度

alert($(document.body).height()) //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true)) //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()) //浏览器当前窗口可视区域宽度

alert($(document).width()) //浏览器当前窗口文档对象宽度

alert($(document.body).width()) //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true)) //浏览器当前窗口文档body的总宽度 包括border padding margin

JQ可以否?

$(document).ready(function(){

var screenWidth=$(window).width()//获得当前网页可视宽度

var bannWidth=screenWidth>1280?787:605

$(".banner").width(bannerWidth)

})