技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

HTML5里面怎样自动适应手机屏幕的高度

来源: 技术CTO 阅读:

请教各位高手一个问题,HTML5里面怎样自动适应手机屏幕的高度

宽度自适应,

高度,不同移动设备,分辨率不同,则显示不同
height:100%
【】
有两种
1.通过设置viewport参数
2.使用css3中的缩放

两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。
可以用js获取屏幕高度: window.screen.height
高度获取不了,除非js。响应式高度设置最好将字体单位设为em,然后所有元素的像素值都可根据字体获取
1/父容器字体大小(将em转化成px)*当前容器大小(px)

加一个js包和一行代码。
<script type="text/javascript" src="/it_book/js/viewport_width.js"></script>
adaptUILayout.adapt(640);
括号内是自定义值

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^