web网站在不同设备下进行缩放
Posted cathyxiao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web网站在不同设备下进行缩放相关的知识,希望对你有一定的参考价值。
<script>
function calculatescale() {
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 1280;//除以的值按手机的物理分辨率
var ua = navigator.userAgent;
var viewportmetacontent = "";
if (/android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) { // andriod 2.3以上
viewportmetacontent=‘width=device-width,initial-scale=‘ + phoneScale + ‘,minimum-scale=‘ + phoneScale + ‘,user-scalable=yes‘;
} else {
viewportmetacontent=‘width=device-width,user-scalable=yes‘;
}
// 其他系统
} else {
viewportmetacontent = ‘width=device-width, initial-scale=‘ + phoneScale + ‘,minimum-scale=‘ + phoneScale + ‘,user-scalable=yes‘;
}
return viewportmetacontent;
}
document.write(‘<meta name="viewport" content="‘+calculatescale()+‘">‘);
</script>
window.addEventListener(‘orientationchange‘, function (event) {
var viewportmeta = document.querySelector(‘meta[name="viewport"]‘);
if (viewportmeta) {
viewportmeta.content = calculatescale();
}
});
以上是关于web网站在不同设备下进行缩放的主要内容,如果未能解决你的问题,请参考以下文章