·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]手机html5页面如何自适应手机屏宽源代码

时间:2017-03-17 12:30酷播
[html5]手机html5页面如何自适应手机屏宽源代码范例

[html5]手机html5页面如何自适应手机屏宽源代码范例

  1. <script type="text/javascript">   
  2.     var phoneWidth =  parseInt(window.screen.width);   
  3.     var phoneScale = phoneWidth/640;   
  4.     var ua = navigator.userAgent;   
  5.     if (/Android (\d+\.\d+)/.test(ua)){   
  6.         var version = parseFloat(RegExp.$1);   
  7.         if(version>2.3){   
  8.             document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);   
  9.         }else{   
  10.             document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);   
  11.         }   
  12.     } else {   
  13.         document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);   
  14.     }   
  15. </script>   

首先解释该标签的含义:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果你完全不了解这个标签的使用需要先百度一下。

解释:content中的“width” 这个width指的是什么宽度,我看过的文章对这个都没有解释的很清楚,有几个备选:虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等?经试验这个指的是虚拟窗口的宽度。了解宽度之后,对后续的各种scale,就应该知道是谁与谁的比例,是 虚拟窗口宽度 / 页面宽度,这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸,当然有些浏览器会自动缩放使其适应屏幕,但这不是统一标准,正确的做法是用js动态生成此标签,当然,应该先获取屏幕尺寸。

保利威视云直播提供稳定流畅,高画质,低延迟的直播服务

酷播云服务,酷播云