您的位置：首页 > 移动开发

移动端适配两种常用解决方案

2018-03-16 09:54 302 查看

方案一：固定宽度，viewport 缩放（px单位方式）

<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<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">
<script type="text/javascript">
if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
var version = parseFloat(RegExp.$1);
console.log(version);
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,minimal-ui">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi,minimal-ui">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi,minimal-ui">');
}
</script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<title></title>
</head>

以640px为例：视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位（px、em）即可完成。

判断访问终端：

<script>
    //判断访问终端
var browser={
    versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
    return {
    trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
    }(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
</script>

方案二：rem单位方式（当前像素除以100）1、拿到设计图，计算出页面的总宽，为了好计算，取100px的font-size，如果设计图是iPhone6的那么计算出的就是7.5rem，如果页面是iPhone5的那么计算出的结果就是6.4rem。<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>2、动态设置html标签的font-size值：document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';3、做页面是测量设计图的px尺寸除以100得到rem尺寸（200px换算成2rem）。4、注意，文字字体大小不要使用rem换算。

<html>
    <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body{
        margin: 0;
        padding: 0;
        }
        .box{
         width: 2rem;
        height: 2rem;
        background: #fff;
        }
    </style>
    </head>
    <body>
        <div class="box"></div>
       <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
    </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端移动端适配

相关文章推荐

新的分享

章节导航