modernizr.min.js怎么兼容媒体查询的

JavaScript030

modernizr.min.js怎么兼容媒体查询的,第1张

width = device-width:宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

大概写一下:

方法一:用触发手机的横屏和竖屏之间的切换的事件

代码如下:

window.addEventListener("orientationchange", function() {

// 宣布新方向的数值

alert(window.orientation)

}, false)

方法二:监听调整大小的改变

代码如下:

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (内部/外部宽度,内部/外部高度)

}, false)

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角:

代码如下:

var mql = window.matchMedia("(orientation: portrait)")

// 如果有匹配,则我们处于垂直视角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一个媒体查询改变监听者

mql.addListener(function(m) {

if(m.matches) {

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向"

}

else {

document.getElementById("test").innerHTML="改变到水平方向"

// 改变到水平方向

}

})

js完整代码:<script language="javascript"> var refer=document.referrer document.getElementById('backurl').value=refer</script>“HTTP_REFERER”链接到当前页面的前一页面的 URL 地址。不是所有的用户代理(浏览器)都会设置这个变量,而且有的还可以手工修改 HTTP_REFERER。因此,这个变量不总是真实正确的。注意 document.referrer和“HTTP_REFERER” 中间差一个字母,却是不同的概念的东东,请注意使用js中的referrer使用,返回上一页在js中写上location.href = document.referrer就可以实现跳转到上一个页面了,让用户觉得体验很好但是在IE中referrer就没那么尽人意了啊,IE会清空referrer众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致:在IE中用javascript做跳转,比如用window.location.href = “http://www.hnnedu.com ”google无法取到浏览器请求的HTTP referrer,因为IE清空了document.referrer而其他主流浏览器Firefox和Chrome都会保留referrer,这意味着IE又要享受“部长级”特殊待遇了:view sourceif (/MSIE (\d+\.\d+)/.test(navigator.userAgent)){var referLink = document.createElement('a') referLink.href = url document.body.appendChild(referLink) referLink.click()}else { location.href = url}这样的原理就是给IE浏览器的页面偷偷加了个链接,然后自动点这个链接,于是referrer就能保留了。