码迷,mamicode.com
首页 > 移动开发 > 详细

移动端开发的兼容性处理

时间:2015-06-30 21:41:37      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

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 -->

 

移动端开发的兼容性处理

标签:

原文地址:http://www.cnblogs.com/mrxia/p/4611514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!