移动端横屏问题解决方法以及BUG解决方法。

来源:互联网 发布:地理数据 共享 编辑:程序博客网 时间:2024/06/10 00:07

1.有的时候做H5的页面的时候会出现要关注横屏的情况。但是如果是用百分比的话横屏容器就会被拉的特别宽。里面的元素标签就会飘的哪里都是。此时就可以使用css3的媒体查询功能来设置布局。

@media all and (orientation : landscape) { 

h2{color:red;}/*横屏时字体红色*/

2.这个也有一个bug。就是安卓手机的兼容性不是很好。所以亲测的解决方法是容器的宽度不要设置为百分之百。如果一旦设置为百分之百。页面里如果有input输入按钮,键盘一弹出来。竖屏的时候整个页面就会被拉长。最好设置百分之六十,并且要居中显示,用margin:0 ,auto就可以了。如果是用了定位。那就用transform来设置居中即可。

0 0