您的位置：首页 > Web前端 > CSS

根据设备视口宽度来更换样式表

2016-02-11 09:57 549 查看
<html>
<head>
<meta charset="utf-8"/>
<meta content="width = device-width, initial-scale = 1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name = "viewport" id = "viewport"/>
<!-- 
一个id和name 为viewport 的meta元标签标示约束视口,
width = device-width 命令视口宽度变为设备宽度;
initial-scale = 1.0, 命令视口宽度默认缩放等级为1;
minimum-scale=1.0, 最小缩放等级为1;
maximum-scale=1.0, 最大缩放等级为1;
user-scalable=no    不允许用户缩放页面;
-->
<!-- 由于手机视口的特殊性,需要添加视口约束标签,让浏览器获得在手机访问时的"屏幕宽度" -->
<meta>
<title>设备检测</title>

<link id = "mylink" rel = "stylesheet" href = "css/1.css" type = "text/css"></link>
</head>
<body>

<h1 id = "infoWidth">设备宽度</h1>
<script>
var docWidth;
//页面加载的时候先调用一次,加载正确的css
changeCSS ();

window.onresize = changeCSS;

function changeCSS (){
//此部分为根据检测浏览器的宽度来更换css样式表,适用于应用不同分表率的台式机;
var docWidth = document.documentElement.clientWidth;//获得浏览器当前的宽度;
var infoWidth = document.getElementById("infoWidth");
infoWidth.innerHTML=docWidth;
//通过判断屏幕宽度的不同更换CSS
if (docWidth > 600){

var mylink = document.getElementById("mylink");
mylink.href = "css/2.css";/*更换一个css样式*/
}else if( docWidth > 600 && docWidth > 300 ){
var mylink = document.getElementById("mylink");
mylink.href = "css/3.css";/*更换一个css样式*/
}else{
var mylink = document.getElementById("mylink");
mylink.href = "css/4.css";/*更换一个css样式*/
}
}

</script>
</body>
<html/>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航