手机浏览器，html页面自动缩放_html 手机自动缩小-CSDN博客

本文链接：https://blog.csdn.net/cc1314_/article/details/115127628

本文介绍了如何使用HTML和CSS实现手机浏览器下的自动缩放，通过`viewport`元标记调整视口宽度，确保网站在不同设备上保持良好显示。关键点包括`meta viewport`的使用和判断设备类型以设置合适的字体大小。

摘要由CSDN通过智能技术生成

html页面根据手机浏览器自动缩放，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" id="view" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
		<title>官网</title>
	</head>
	<body>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
	<script type="text/javascript">
		(function(doc, win) {
			var html = doc.getElementsByTagName("html")[0],
				reEvt = "orientationchange" in win ? "orientationchange" : "resize",
				reFontSize = function() {
					var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
					if (!clientW) {
						return;
					}
					if (clientW > 800) html.style.fontSize = 15 * (clientW / 1366) + "px"; //1366为设计图宽度
					else html.style.fontSize = "15px";
				}
			win.addEventListener(reEvt, reFontSize);
			// DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
			doc.addEventListener("DOMContentLoaded", reFontSize);
		})(document, window);
		var ua = navigator.userAgent;

		var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

			isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

			isAndroid = ua.match(/(Android)\s+([\d.]+)/),

			isMobile = isIphone || isAndroid;

		//判断

		if (isMobile) {
			//获取设备像素
			var devicewidth = document.documentElement.clientWidth;
			var devicewidth2 = window.screen.width;
			//按照比例 设置id为view的content值为scale，ok
			var scale = devicewidth / 1366; //1366是我原本设计PC页面固定的大小，根据你自己页面进行修改

			document.getElementById("view").setAttribute('content', "user-scalable=yes, width=device-width, initial-scale=" + scale);
		}
	</script>
</html>