오늘 저는 QQ 사서함 웹 페이지의 전반적인 스케일링 효과에 대해 알게되었습니다. 구현 방법은 매우 간단합니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8" />
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1, 최대-스케일 = 1, 사용자-규모 = no">
<title> 테스트 페이지 </title>
<스타일 유형 = "텍스트/CSS">
div {
너비 : 600px;
텍스트 정렬 : 센터;
글꼴 크기 : 4EM;
색상 : #333;
}
</스타일>
<script type = "text/javaScript"src = "http://code.jquery.com/jquery-1.11.0.js"> </script>
<script type = "text/javaScript">
$ (function () {
var r = document.body.offsetwidth / window.screen.availwidth;
$ (document.body) .css ( "-webkit-transform", "scale (" + r + ")");
});
$ (Window) .resize (function () {
var r = document.body.offsetwidth / window.screen.availwidth;
$ (document.body) .css ( "-webkit-transform", "scale (" + r + ")");
});
</스크립트>
</head>
<body>
<div> 창 크기를 변경해보십시오. 무엇을 찾을 수 있습니까? </div>
</body>
</html>