页面自适应各种手机屏幕：阿赛特别方法处理页面固定宽度适应各种终端的解决方案

最新推荐文章于 2021-08-03 23:59:02 发布

阿赛工作室

最新推荐文章于 2021-08-03 23:59:02 发布

阅读量178

点赞数

分类专栏： CSS HTML javascript 文章标签： html css js html5 javascript

本文链接：https://blog.csdn.net/qq_25753445/article/details/110228154

版权

javascript 同时被 3 个专栏收录

55 篇文章 2 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<title>页面自适应各种手机屏幕：阿赛特别方法处理页面固定宽度适应各种终端的解决方案</title>
		<script>
			var bodyWidth = document.documentElement.clientWidth;
			var bodyZoom = bodyWidth / 320;
			console.log(666.111, bodyZoom);
			document.write('<style>.zoom{transform:scale(' + bodyZoom + ',' + bodyZoom + ');}</style>');
		</script>
	</head>

	<body style="width:100%;display:flex;justify-content:center;margin:0;padding:0;">
		<div class="zoom" style="background-color:#66F;color:#FFF;width:320px;height:320px;text-align:center;transform-origin:50% 50%">
			<h1>标题1</h1>
			<h2>标题2</h2>
			<h3>标题3</h3>
			<h4>标题4</h4>
			<h5>标题5</h5>
			这是一个测试的页面！《好》
		</div>

	</body>
</html>

阿赛工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面自适应各种手机屏幕：阿赛特别方法处理页面固定宽度适应各种终端的解决方案

<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>页面自适应各种手机屏幕：阿赛特别方法处理页面固定宽度适应各.
复制链接

扫一扫