微信H5开发，怎样禁止手机横屏

最近开发微信H5时遇到一个非常蛋疼的问题，就是手机横屏显示时，排版出问题了，严重变形。就像下面这样。

页面一团糟

在网上找了很多方法，下面网友的建议方法：

网上的一些方法

后来我就把各个大神做的H5都拿出来看看，发现基本上有问题。也就是说横屏的体验是很差的，毕竟微信H5是二次开发，没有权限获取相关接口。

折腾了一天了，没有太好的解决方法。所以在开发的时候，就是基于手机竖屏了，也就是让所有的图片，标签都旋转90度。但前提是必须禁止手机屏幕旋转。

图片旋转90度的css代码：-webkit-transform: rotateZ(90deg);transform: rotateZ(90deg);

另外一种方法就是，检测手机屏幕是否是横屏了，css3@media{判断手机横竖屏}：

检测手机横屏代码：

@media all and (orientation : landscape) {

.heng{height:100%;width:100%;text-align:center;background:#fff;position:absolute;z-index: 99999;display:block;}/*横屏时的样式*/

.heng p{margin:0 auto;color:#000;margin-top:90px;}

}

检测手机竖屏代码

@media all and (orientation : portrait){

h2{color:green;}/*竖屏时样式*/

效果

正常情况

检测到手机旋转时

当然，css可以做到的，js也一样可以。我们可以通过访问对象的matches属性：

if(mql.matches) {console.log('portrait'); // 竖屏}else {console.log('landscape'); // 横屏

监听屏幕方向变化，通过MediaQueryList对象的addListener方法；

var mql = window.matchMedia('(orientation: portrait)');

console.log(mql);

function handleOrientationChange(mql) {

if(mql.matches) {

console.log('portrait'); // 打印竖屏

}else {

console.log('landscape'); // 打印横屏

// 打印日志

handleOrientationChange(mql);

// 监听屏幕模式的变化

mql.addListener(handleOrientationChange);