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

JavaScript027

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

//你看一下，这个可以吗！

function fullScreen() { 

var el = document.documentElement 

var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen 

if (typeof rfs != "undefined" && rfs) { 

rfs.call(el) 

} else if (typeof window.ActiveXObject != "undefined") { 

// for Internet Explorer 

var wscript = new ActiveXObject("WScript.Shell") 

if (wscript != null) { 

wscript.SendKeys("{F11}") 

} 

} 

}

用 JavaScript 控制浏览器窗口大小：

A:有时候，需要控制显示窗口的大小，通过点击窗口右上角的控制按钮来实现。

function Minimize()

{

window.innerWidth = 100

window.innerHeight = 100

window.screenX = screen.width

window.screenY = screen.height

alwaysLowered = true

}

function Maximize()

{

window.innerWidth = screen.width

window.innerHeight = screen.height

window.screenX = 0

window.screenY = 0

alwaysLowered = false

}

上面的代码包含 2 个函数，第 1 个函数 Minimize 中使用 innerWidth 和 innerHeight 2 个命令在象素级别上控制窗口尺寸大小，这里将窗口设置为宽 100 高100。然后，设置窗口的起始位置，定位大小为屏幕的宽和高，这样，使用 alwaysLowered 命令就将窗口缩小并移动到了屏幕的右下角。触发事件是一个 JavaScript 链接 〈A HREF="javascript:onClick=Minimize()"〉Minimize〈/A〉。同时，上述代码可以用于设置屏幕的任何分辨率。

　 注意，当在页面上应用这个功能时，请将那 2 个触发事件的链接放置在页面的左上角，这样，当窗口缩小到右下角时，也不会消失。