有时候,我们需要根据终端设备的宽度不同来加载不同的页面,以达到预期的显示效果。
以下提供两种解决方法。
-
第一种方式,加载同一个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)