在網(wǎng)站制作中,如果要在多個不同的分辨率下的終端顯示友好的效果,需要對終端進行判斷。
在CSS3的響應式開發(fā)中,我們可以使用媒體查詢。
但是如果不使用媒體查詢來進行判斷呢,用JS如何實現(xiàn)?
弟一個方式就是通過判斷屏幕大小使用不同的CSS,一定要放在頭部哦。
<script>
// 分辨率大于等于1680,大部分為1920的情況下,調用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率再在1600-1680的情況下,調用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的情況下,調用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>第二種方式:
判斷不同的終端,跳轉到不同的頁面。
<script type="text/javascript">
function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href= '手機站鏈接';
} else {
window.location= 'PC站鏈接';
}
}
browserRedirect();
</script>第三種:根據(jù)屏幕尺寸執(zhí)行事件
<script>
if (document.body.clientWidth <= 1440){
//這里執(zhí)行事件1
}else if (document.body.clientWidthh <= 1366){
//這里執(zhí)行事件2
}else if (document.body.clientWidth <= 768){
}else {
//這里執(zhí)行事件4
}
</script>