html5（公众号）怎么做到微信浏览器强制竖屏

Question

现在在做一个公众号，因为内容有图片，用户可能就会去横屏观看，但是老大要求只能竖屏，我知道QQ和UC可以强制竖屏，请问怎么做到微信浏览器强制竖屏啊？或者谁有比较好的规避或者折中办法？跪求，谢谢...

这是横竖屏旋转的效果，我样式差不多都是百分比和rem弄的，但是感觉样式有点乱，这是怎么回事啊，新手小白，求解...

Answer 1

谢邀！
微信默认开启了横屏模式，h5目前无法做到微信浏览器强制竖屏，。
解决思路：
1、布局时就兼容横屏，一般采用flex布局
2、当横屏时给与相应的提示！
CSS判断横屏竖屏：

@media screen and (orientation: portrait) {
  /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

JS判断横屏竖屏：

// 移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
        alert('竖屏状态！');
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
        alert('横屏状态！');
    }  
}, false); 

Answer 2

微信设置里自带了开启横屏模式，web 层面上无法禁止呢。可以 JS 判断手机横屏，给个相应提示。

Answer 3

没有直接方法禁止不能横屏
但是你可以设置宽度多少 然后禁止缩放
如下

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-        
scalable=0,minimum-scale=1.0,maximum-scale=1.0" />

宽度为屏幕宽度
处理缩放比例
用户禁止手动缩放 
允许最小比例 
最大比例

对应的字段意思

Answer 4

https://segmentfault.com/q/10...

Answer 5

分两种情况
1.用户的微信/系统禁用横屏模式
此时你把页面用 transform: rotate(90deg); 旋转90°;当然只用transform达不到效果的，还要自己写其他样式
2.用户微信开启了横屏模式，就是手机横着拿页面会自动横着显示。
此时能监听到手机横竖屏模式，页面默认还是像第一种设计，当触发横屏/竖屏事件，做有样式处理，一般就是addClass和removeClass

 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",     
 function () {
        if (window.orientation === 180 || window.orientation === 0) {
           // 竖屏状态
        }
        if (window.orientation === 90 || window.orientation === -90) {
          // 横屏状态
        }
    }, false);