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网站在不同设备下进行缩放的主要内容,如果未能解决你的问题,请参考以下文章

移动web——移动开发选择和技术解决方案

web.config 问题

响应式布局

验发票网站成功推出验发票移动web版

不同设备上的相同网站?

提高WEB性能的6个技能