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

最新推荐文章于 2024-07-16 16:27:07 发布

huoyan2016

最新推荐文章于 2024-07-16 16:27:07 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/huoyan2016/article/details/53322007

版权

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

@media all and (orientation : landscape) {

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

}

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