网页技术交流
 
发新帖
楼主: 天启
查看: 949|回复: 0

[使用教程] JS实现移动端页面按手机屏幕分辨率自动缩放的最强代码

[复制链接]
天启VIP6 发表于 2019-12-10 14:19:19 | 显示全部楼层
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示。关于移动端页面按手机屏幕分辨率自动缩放的JS代码
  1. <script>
  2. var phoneWidth = parseInt(window.screen.width);
  3. var phoneHeight = parseInt(window.screen.height);
  4. var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
  5. var ua = navigator.userAgent;
  6. if (/Android (\d+\.\d+)/.test(ua)) {
  7. var version = parseFloat(RegExp.$1);
  8. // andriod 2.3
  9. if (version > 2.3) {
  10. document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
  11. // andriod 2.3以上
  12. } else {
  13. document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
  14. }
  15. // 其他系统
  16. } else {
  17. document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
  18. }
  19. </script>  
复制代码



快速回复 返回顶部 返回列表