HTML5 移动端适配问题

最新推荐文章于 2023-10-30 17:09:34 发布

gzlxing

最新推荐文章于 2023-10-30 17:09:34 发布

阅读量655

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_40238154/article/details/78724741

版权

适配

rem适配

相关代码：<!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 8rem;
            height: 8rem;
            background:yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box">box</div>
</body>
<script type="text/javascript">
    (function(){
        var head=document.head;
        var width=document.documentElement.clientWidth;
        var styleN=document.createElement('style');
        styleN.innerHTML='html{font-size:'+width/16+'px !important;}';
        head.appendChild(styleN);
    })();
</script>
<script type="text/javascript">
   (function(){
        var width=document.documentElement.clientWidth;
        var html=document.getElementsByTagName('html')[0];
        html.style.fontSize=(width/7.5)+"px"
    }())
</script>
</html>

viewport适配

相关代码：<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 800px;
            height: 200px;
            background:yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box">box</div>
</body>
<script type="text/javascript">
    (function(){
        var head=document.head;
        var width=document.documentElement.clientWidth;
        var targetW=320; 
        var scale=width/targetW;
        var meta=document.querySelector('meta[name="viewport"]');
        meta.setAttribute('content','initial-scale='+scale+',user-scalable=no');

    })();
</script>
</html>

1px适配

相关代码：<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0,user-scalable=no"/>
    <title></title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 8rem;
            height: 8rem;
            border: 1px solid;
        }

    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    /*(function(){
        var head=document.head;
        var width=document.documentElement.clientWidth;
        var styleNode=document.createElement('style');
        styleNode.innerHTML='html{font-size: '+width/16+'px !important;}';
        head.appendChild(styleNode);
    })();*/
    /*(function(){
        var meta=document.querySelector('meta[name="viewport"]');
        var width=document.documentElement.clientWidth;
        var targetW=320;
        var scale=targetW/width;
        meta.setAttribute('content','inital-scale= '+ scale +',user-scale=no');

    })();*/
    (function(){
        var head=document.head;
        var width=document.documentElement.clientWidth;
        var dpr=window.devicePixelRatio||1;
        var scale=1/dpr;
        var meta=document.querySelector('meta[name="viewport"]');
        meta.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no');

        var styleN=document.createElement('style');
        styleN.innerHTML='html{font-size: '+ width/16*dpr +'px !important;}';
        head.appendChild(styleN);
    })();
</script>
</html>