微信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);

微信H5开发，怎样禁止手机横屏相关推荐

h5键盘把页面顶走了_微信h5开发的坑
记一次微信h5开发的坑... 正常的效果如下: 本身用的cube-ui开发,上半部分是自己写的,下边用的是better-scroll,为了滑动更流畅.这个页面前边有一个登录页面,登录之后就会跳到这个首 ...
挑选微信h5开发制作公司的标准是什么？
基于H5引擎技术的不断成熟与迭代,H5小游戏的制作水准和需求量也是越来越高,像TOM游戏,金豆游戏这些h5开发公司也如雨后春笋般涌现出来,现在市面上的微信h5开发制作公司那么多,又该如何挑选呢?挑选的 ...
微信H5开发-大多数前端都会遇到的几个兼容性的坑
点击上方"小生方勤",选择"设为星标" 第一时间关注技术干货! 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿 ...
Flutter 如何禁止手机横屏[Flutter专题62]
问题引出群友发来问题: Flutter 怎么禁止横屏显示呀,网上说的几个方法都没有效群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义. 正文在一些特定的 App 里,我们不希望手机横 ...
android 判断安装微信,Android开发中判断手机是否安装了QQ或者微信
下面一段代码给大家分享了android中判断手机是否安装了qq或者微信,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧 public static boolean isWeixinAv ...
解决h5 开发，设置手机字体大小微信设置字体大小页面变形问题
1 https://www.cnblogs.com/luoyihao/p/12385975.html 1 ios系统: body{ -webkit-text-size-adjust: 100% !im ...
微信H5开发之页面布局
随着微信用户数量超过 10 亿,作为 web 开发者,微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播.于是,在开发过程中,如何去兼容微信,就成为了一个 we ...
微信网页开发，禁止右上角微信复制分享链接JS
禁止微信右上角分享链接开发网页时,为了提高网页链接的安全,不想让别人分享链接给别人一般微信打开网页后,点击右上角是这样的想要网页不能被复制,不能分享给其他人效果图: 资源文件下载地址下载地址 ...
【分享】在线解析微信h5网页标签跳转到手机默认浏览器的实现方式
最近遇到一个需求.朋友找我制作一个在微信中的聊天框,或者公众号菜单发布一条链接或者二维码.跳出微信打开一个指定的我们自己的页面, 拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的 ...
html5微相册,微信开发微信H5开发微信小程序微报名微相册微**
尚仁网络声明:本服务标价仅作为参考,最终开发费用以实际需求评估为准. [交易流程] 1.预定之前请您先通过猪八戒网与我咨询沟通,您所需大致想法和需求.开发费用及开发周期都是根据您的需求功能和难易程度而 ...

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

微信H5开发，怎样禁止手机横屏相关推荐

最新文章

热门文章