HTML5 移动端 适配问题
适配
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>
1234567891011121314151617181920212223242526272829303132333435363738viewport适配
相关代码：<!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>
1234567891011121314151617181920212223242526272829303132331px适配
相关代码：<!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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253相关知识
HTML5移动开发
移动端
HTML5响应式鲜花绿植花店销售展示类网站模板(自适应手机端)
鲜花店电商网站html5模板
html5鲜花网页代码
移动应用程序开发3种方式比较
HTML5开发移动web应用——SAP UI5篇(1)
移动应用开发论文10篇
「职位对比」花儿绽放 前端开发工程师怎么样
AppCan：一站式在线移动应用开发平台
网址: HTML5 移动端 适配问题 https://m.huajiangbk.com/newsview948537.html
| 上一篇: 手机端适配 |
下一篇: 一个判断语句，区分当前设备是PC |
