//需要給設置scale屬性的盒子添加css
transform-origin: 0 0;
// 縮放
(function() {
var ww = window.innerWidth;
var wh = window.innerHeight;
let scaleX = ww / 750;
if (scaleX < 1) {
$('#scaleContainer, .flex-box')
.css('transform', 'scale(' + scaleX + ')')
.show();
$('.pop_qs').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
height: wh / scaleX - 400
});
$('.pop_qs_suspect').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
});
$('.button, .placeNavMove').css({
transform: 'scale(' + scaleX + ')'
});
} else {
$('#scaleContainer, .flex-box').show();
$('.button, .placeNavMove').css({
'margin-left': (ww - 750) / 2
});
}
let scalexPop = (wh * (ww / 472)) / 590;
if (Math.floor(scalexPop) <= 0) {
$('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
}
})();
// resize
(function() {
window.addEventListener('resize', resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
var ww = window.innerWidth;
var wh = window.innerHeight;
var scaleX = ww / 750;
if (scaleX < 1) {
$('#scaleContainer')
.css('transform', 'scale(' + scaleX + ')')
.show();
$('.button, .placeNavMove, .flex-box').css({
transform: 'scale(' + scaleX + ')'
});
$('.pop_qs').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)',
height: wh / scaleX - 400
});
$('.pop_qs_suspect').css({
transform: 'scale(' + scaleX + ') translate(-50%, -50%)'
});
} else {
$('#scaleContainer').show();
$('.button, .placeNavMove, .flex-box').css({
'margin-left': (ww - 750) / 2
});
}
let scalexPop = (wh * (ww / 472)) / 600;
if (Math.floor(scalexPop) <= 0) {
$('.previw-area, .previw').css('transform', `scale(${scalexPop})`);
}
}
})();
利用transform:scale屬性完成移動端適配
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.