星空网 > 软件开发 > 网页设计

分享几种移动端标准头

1. rem单位方式,用法当前像素除以100。

<!doctype html><html><head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />  <title>H5移动端</title>  <meta name="format-detection" content="telephone=no">  <link rel="stylesheet" type="text/css" href="static/css/public.css" />  <script>    (function (root) {      var docEl = document.documentElement,        timer = null,        width, last;      function changeRem () {        width = docEl.getBoundingClientRect().width;        if (last === width) { return; }        last = width;        root.rem = (width / 640) * 100;        if (/ZTE U930_TD/.test(navigator.userAgent)) {          root.rem = root.rem * 1.13;        }        docEl.style.fontSize = root.rem + 'px';      }      changeRem();      root.addEventListener('resize', function () {        clearTimeout(timer);        timer = setTimeout(changeRem, 300);      });      root.addEventListener('orientationchange', function () {        clearTimeout(timer);        timer = setTimeout(changeRem, 300);      });    })(window, undefined);  </script></head>

 

2. px单位方式,以640px设计图比例实现。

<!doctype html><html><head>  <meta charset="utf-8">  <meta name="format-detection" content="telephone=no" />  <title>H5移动端</title>  <link rel="stylesheet" type="text/css" href="static/css/public.css" />  <script>    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){      var version = parseFloat(RegExp.$1);      if(version > 2.3){        var phoneScale = parseInt(window.screen.width) / 640;        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">');    }    if(navigator.userAgent.indexOf('MicroMessenger') >= 0){      document.addEventListener('WeixinJSBridgeReady', function() {        //alert(1)        //WeixinJSBridge.call('hideToolbar');      });    }  </script></head>

 

3.px单位方式,以设计图640除以2实现。

<!doctype html><html ><head>  <meta charset="UTF-8">  <meta name="copyright" content="Tencent"/>  <meta name="keywords" content=""/>  <meta name="description" content=""/>  <meta name="author" content=""/>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta name="format-detection" content="telephone=no">  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="black">  <title>首页</title>  <link rel="stylesheet" href="css/public.css" />  <link rel="stylesheet" href="css/css.css" /></head>

 

4.px单位方式及media媒体查询方式实现,判断最大、最小方式实现,设计图还是640标准。

<!doctype html><html ><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width,user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <meta name="format-detection" content="telephone=no" />  <title>首页</title>  <link rel="stylesheet" href="css/public.css" /></head>

 注,第一种、二种方式是现在比较好用的




原标题:分享几种移动端标准头

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流