在網站制作中,如果要在多個不同的分辨率下的終端顯示友好的效果,需要對終端進行判斷。
在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>
第三種:根據屏幕尺寸執(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>