html5 --- 根据屏幕宽度加载不同的html、css或是javascript

最新推荐文章于 2023-11-25 19:35:34 发布

sunnyhyh

最新推荐文章于 2023-11-25 19:35:34 发布

阅读量4.3k

点赞数 4

分类专栏： javascript 文章标签： html5 屏幕宽度自适应调用不同js和css

本文链接：https://blog.csdn.net/sunny_hu92/article/details/102739205

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有时候，我们需要根据终端设备的宽度不同来加载不同的页面，以达到预期的显示效果。

以下提供两种解决方法。

第一种方式，加载同一个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)

或是https://blog.csdn.net/bobo553443/article/details/78625368

sunnyhyh

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
html5 --- 根据屏幕宽度加载不同的html、css或是javascript

有时候，我们需要根据终端设备的宽度不同来加载不同的页面，以达到预期的显示效果。以下提供两种解决方法。第一种方式，加载同一个html，加载不同的js和css <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>myTest</t...
复制链接

扫一扫