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

最新推荐文章于 2024-05-27 10:34:58 发布

嘻嘻迪

最新推荐文章于 2024-05-27 10:34:58 发布

阅读量2.2k

点赞数 2

分类专栏：前端文章标签：前端移动端适配

本文链接：https://blog.csdn.net/m0_37906954/article/details/79577133

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 方案一：固定宽度，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>

嘻嘻迪

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
移动端适配两种常用解决方案

方案一：固定宽度，viewport 缩放（px单位方式）&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;meta name="apple-mobile-web-
复制链接

扫一扫