移动端开发的兼容性处理
PC机与移动端的分辨率不同,导致页面或视频会出现拉长的情况,针对移动端的兼容性问题,可尝试将以下代码加到网页中.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <!--移动端版本兼容 --> <script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">'); } else { document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script> <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"> <!--移动端版本兼容 end -->