HTML5 移动端适配问题

来源：互联网发布：考试宝典软件编辑：程序博客网时间：2024/05/24 05:49

适配

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

阅读全文

0 0

HTML5 移动端 适配问题

适配

HTML5 移动端适配问题