关于移动端设备适配的问题

最新推荐文章于 2022-11-03 21:18:13 发布

weixin_30615767

最新推荐文章于 2022-11-03 21:18:13 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zxlshare/p/6236053.html

版权

　　对于移动端开发来说设备适配问题固然很重要，为了兼容在不同分辨率的情况下的显示问题你，博主写了一部分代码用于帮助大家更加方便的解决移动端开发设备适配问题，废话不多说，直接上代码（我怎么老被上(┬＿┬)）

在HTML中先做基础的编辑：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 6     <meta name="format-detection" content="telephone=no"/>
 7     <meta name="apple-mobile-web-app-capable" content="yes"/>
 8     <meta name="apple-touch-fullscreen" content="yes"/>
 9     <title>Hellow Word</title>
10     <style type="text/css">
11         html,body{
12             height:100%;
13         }
14         body{
15             margin:0;
16         }
17     </style>
18 </head>
19 <body>
20 
21 </body>
22 </html>

　　以上这部分代码都很常见，想省事的童鞋可以直接ctrl+c

　　至于想知道所使用的meat都是什么功能可以搜索一下，大神们讲的都很详细，我就不在此解释献丑了^_^

　　要想做到设备适配光这一些代码肯定是不行，通常都会使用css3新定义的rem来控制，重点来了

JS部分：

1 <script type="text/javascript">
2         var html = document.documentElement;
3         var designWidth = 667;
4         var deviceWidth = html.clientWidth;
5         html.style.fontSize = deviceWidth *100/ designWidth +"px";
6 </script>

　　博主是以iPhone6的屏幕分辨率来做基础计算的，在html标签中设置font-size来编辑页面中的宽高，必须要注意的是在页面中都要用rem设置元素的宽高就能够保证各种分辨率的屏幕进行完美的适配（移动端哦）

　　文章均为博主原创，转载请添加文章地址，谢谢

转载于:https://www.cnblogs.com/zxlshare/p/6236053.html

weixin_30615767

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于移动端设备适配的问题

　　对于移动端开发来说设备适配问题固然很重要，为了兼容在不同分辨率的情况下的显示问题你，博主写了一部分代码用于帮助大家更加方便的解决移动端开发设备适配问题，废话不多说，直接上代码（我怎么老被上(┬＿┬)）在HTML中先做基础的编辑： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ...
复制链接

扫一扫