有時候，我們需要根據終端設備的寬度不同來加載不同的頁面，以達到預期的顯示效果。
以下提供兩種解決方法。
-
第一種方式，加載同一個html，加載不同的js和css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myTest</title>
<script>
var isFHD = screen.width > 1024 ? true : false;
alert(screen.width + ":" + screen.height);
(function() {
var head = document.getElementsByTagName('HEAD')[0];
var style = document.createElement('link');
var js = document.createElement('script');
if (isFHD) {
style.href = 'css/index1.css';
js.src = 'js/main1.js';
} else {
style.href = 'css/index2.css';
js.src = 'js/main2.js';
}
style.type = 'text/css';
style.rel = 'stylesheet';
js.type = 'text/javascript';
head.appendChild(style);
head.appendChild(js);
})()
</script>
</head>
<body>
</body>
</html>
在<head>標籤中，添加<script>代碼，根據screen.width判斷加載不同的js和css。在js中創建<link>和<script>元素，根據需要改變二者的屬性，最後添加進<head>標籤中。
-
第二種方式，在html中判斷加載不同的html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myTest</title>
<script>
var isFHD = screen.width > 1024 ? true : false;
alert(screen.width + ":" + screen.height);
(function() {
if (isFHD) {
window.location = "index1.html";
} else {
window.location = "index2.html";
}
})()
</script>
</head>
<body>
</body>
</html>
然後在不同的.html文件中添加各自的js和css，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myTest</title>
<link id="css" rel="stylesheet" type="text/css" href="css/index1.css">
<script id="js" type="text/javascript" src="js/main1.js"></script>
</head>
<body>
</body>
</html>
即可。
-
延伸知識點 --- 關於screen.width
我在代碼中通過 alert(screen.width + ":" + screen.height);彈出屏幕的寬高信息，手機上顯示414或是300多，然而手機的分辨率分明是1920*1080，這就涉及到“物理分辨率和邏輯分辨率”的知識。CSDN中也有很多關於這方面的介紹，有興趣的可以看看。比如：
摘抄自：https://blog.csdn.net/yihanzhi/article/details/86624411
1、什麼是物理分辨率和邏輯分辨
手機屏幕分辨率有兩個術語：物理分辨率和邏輯分辨率。那麼二者的區別是什麼？這裏我們做下簡單說明。
正如俗話所說物理分辨率是硬件所支持的，邏輯分辨率是軟件可以達到的。
物理分辨率是手機顯示屏實際存在的分辨率，而邏輯分辨率是我們肉眼感知的實際尺寸。
這裏列舉了一些機型的物理和邏輯分辨率，可以參照對比下：
2、如何獲取屏幕物理分辨率和邏輯分辨？
1）前端獲取邏輯分辨率的方法
邏輯分辨率寬：window.screen.width
邏輯分辨率高：window.screen.height
2）前端獲取物理分辨率的方法：
物理分辨率寬：邏輯分辨率寬 * 設備像素比 （window.screen.width * window.devicePixelRatio）
物理分辨率高：邏輯分辨率高 * 設備像素比 (window.screen.height * window.devicePixelRatio)