web HEML直播

webview适配html的方法是通过meta 标签指定屏幕的分辨率。 比如常用写法如下： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 特殊说明： 这里表示 viewport 的宽度为匹配设备屏幕的宽度，且禁用缩放。涉及到两个概念： viewport 元素 devicePixelRatio：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 由于 iphone 手机和 android 4.0 以上的手机支持修改 viewport 的 width 来改变页面的缩放情况，因此我们可以将 width 指定为页面设计的宽度，如此一来，你的页面正好充满 viewport 并全屏显示，而不会缩放。例如： <meta name="viewport" content="width=640px, user-scalable=no">  但是对于 android 4.0 以下的手机，不支持设置 viewport 的 width，但是我们可以设置 Android 的另一参数target-densitydpi，从而达到相同的目的，计算 target-densitydpi 的公式如下： target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160;  //UI-width ：WebApp布局宽度  //device-width ：屏幕分辨率宽度  最终的解决方法：  <meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no"> $(function () {  var DEFAULT_WIDTH = 640, // 页面的默认宽度  ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息  deviceWidth = window.screen.width, // 设备的宽度  devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1  targetDensitydpi;   // Android4.0以下手机不支持viewport的width，需要设置target-densitydpi  if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {  targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;  $('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +  ', width=device-width, user-scalable=no');  }   // TODO: 其他手机需要特殊处理的在下面 });

答案来源网络，供参考，希望对您有帮助