&项目要求:
微信公众号网页强制横屏(不管用户是否开启竖排方向锁定)
拖了几个月还没将这篇写完....都快忘光了....
竖屏（portrait）横屏（landscape）
&!--判断是否是横屏状态还是竖屏状态--&
&script language="javascript" type="text/javascript"&
//屏幕方向标识，0横屏，其他值竖屏
var orientation=0;
//转屏事件
function screenOrientationEvent(){
var width = document.documentElement.clientW
var height = document.documentElement.clientH
$print = $('#print');
$jstargetDIV=$('#js-targetDIV');
if( width & height ){
$print.width(width);
$print.height(height);
$print.css('top', 0 );
$print.css('left', 0 );
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
$jstargetDIV.width(width);
$jstargetDIV.height(height);
$jstargetDIV.css('top', 0 );
$jstargetDIV.css('left', 0 );
$jstargetDIV.css('transform' , 'none');
$jstargetDIV.css('transform-origin' , '50% 50%');
$print.width(height);
$print.height(width);
$print.css('top', (height-width)/2 );
$print.css('left', 0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
$jstargetDIV.width(height);
$jstargetDIV.height(width);
$jstargetDIV.css('top', (height-width)/2 );
$jstargetDIV.css('left', 0-(height-width)/2 );
$jstargetDIV.css('transform' , 'rotate(90deg)');
$jstargetDIV.css('transform-origin' , '50% 50%');
var innerWidthTmp = window.innerW
//横竖屏事件监听方法
function screenOrientationListener(){
var iw = window.innerW
//屏幕方向改变处理
if(iw != innerWidthTmp){
if(iw&window.innerHeight)orientation = 90;
else orientation = 0;//横屏
//调用转屏事件
screenOrientationEvent();
innerWidthTmp =
} catch(e){alert(e);};
//间隔固定事件检查是否转屏
setTimeout("screenOrientationListener()",100);
//启动横竖屏事件监听
screenOrientationListener();
&!--用js控制横竖屏宽高样式--&
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
if( width & height ){
console.log(width + " " + height);
$('#print');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
$print.css('overflow' , 'scroll');
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
console.log(evt);
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
$('#print');
if( width & height ){ //竖
$print.width(width);
$print.height(height);
$print.css('top',
$print.css('left',
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}, false);
做横竖屏需要考虑横竖屏的样式问题,大体的最好统一,就能减少很多的css样式
@media screen and (orientation: portrait) {
width : 100% ;
height : 100% ;
background-color: green ;
overflow : hidden;
width : 100% ;
height : 100% ;
background-color: red ;
overflow : hidden;
position : absolute ;
background-color: yellow ;
@media screen and (orientation: landscape) {
width : 100% ;
height : 100% ;
background-color: deeppink ;
width : 100% ;
height : 100% ;
background-color: blue ;
position : absolute ;
left : 0 ;
width : 100% ;
height : 100% ;
overflow: scroll;
注意看好html的print,这个是核心哦
&div id="print" class="print"&
就是靠print来旋转的
看别人的不如自己来练手!
如果有写错的请多多指教!虚心接受
阅读(...) 评论()移动端如何强制页面横屏时间: 阅读: 1139标签: 移动端背景最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行，碰到某个国家的地标就弹出该国的相应say hello的tip，要求横屏显示，不能竖屏。然而当用户竖屏打开时，而且没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。而且有些机型有些app不能横屏：比如Android的微信就没有横屏模式，而ios的微信能开启横屏模式。解决办法就是在竖屏模式下，写一个横屏的div，然后设置rotate正（负）90度，把他旋转过来；而且如果用户切到横屏时，需要把rotate复原，要求也能正常展现。纯css把main这个div在竖屏模式下横过来，横屏状态下不变。@media screen and (orientation: portrait) {
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100
height: 100
/*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
@media screen and (orientation: landscape) {
-webkit-transform:rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}但是有个问题是在横屏模式下，利用css旋转90度后，宽和高不好控制。&width: 100
height: 100这样控制宽高不太适合单屏宽高的页面。&js计算宽高、对齐、旋转上文提到了，在portrait下，旋转到横屏后宽和高会有问题。可以通过下面的js来实现。&var width = document.documentElement.clientW
var height =
document.documentElement.clientH
if( width & height ){
$('#print');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2);
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}需要注意的是transform-origin是50% 50%,旋转90deg后，还需要重新设置top和left将其对齐。最终方案如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，上面的代码还是有问题。var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
console.log(evt);
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
$('#print');
if( width & height ){
$print.width(width);
$print.height(height);
$print.css('top',
$print.css('left',
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}, false);完整代码/**
* @param {Object}
function changeOrientation($print) {
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
if(width & height) {
$print.width(height);
$print.height(width);
$print.css('top',
(height - width) / 2 );
$print.css('left',
0 - (height - width) / 2 );
$print.css('transform', 'rotate(90deg)');
$print.css('transform-origin', '50% 50%');
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
setTimeout(function() {
var width = document.documentElement.clientW
var height =
document.documentElement.clientH
// 刷新城市的宽度
initCityWidth();
// 初始化每个气泡和自行车碰撞的距离
cityCrashDistanceArr = initCityCrashDistance();
if( width & height ){
$print.width(width);
$print.height(height);
$print.css('top',
$print.css('left',
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
$print.width(height);
$print.height(width);
$print.css('top',
(height-width)/2 );
$print.css('left',
0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}, false);
}总结该方案只适合页面宽高占一屏，不适合可以滚动的方案，用orientationchange和resize监听横竖屏切换会有延迟的问题，具体解决延迟的方案见我的另外一篇文章参考资料：demo：，来源：&手机上如何让页面强制横屏
首先准备一段html内容：
div id="content"&
p&谁说html5不能横屏的。。。p&
p&我就是要横屏。。。p&
p&要横屏。。。p&
p&横屏。。。p&
p&屏。。。p&
p&图片也是可以的。img src="http://img001.photo.21cn.com/photos/album//o/6A7A403C29766CBCB38C616BDFD48486.jpg" /&p&
其实原理很简单，只需要把内容向右旋转90度就变成了横屏啊。先把定位修改为absolute：
#content {
position: absolute;
width: 100%;
height: 100%;
#content p {
margin: auto;
margin-top: 20px;
text-align: center;
width: 100px;
其实除了position:
这行代码其他都是不必要的，其他只是为了做一些居中对齐等。然后我们用js判断是竖屏(portrait)还是横屏(landscape)，如果是竖屏，向右旋转90度。
const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
if (width & height) {
console.log(width + " " + height);
const contentDOM = document.getElementById('content');
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)';
但是如果用户的屏幕旋转按钮开着，然后用户又把手机横过来，就悲剧了，如下图。
所以我们还需要监听屏幕变化，如果用户自己把屏幕横过来，就把之前的旋转去掉。
const evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function () {
const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;
const contentDOM = document.getElementById('content');
alert('width: ' + width + ' height: ' + height)
if (width & height) {
contentDOM.style.width = width + 'px';
contentDOM.style.height = height + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none';
alert('change to portrait')
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)';
}, false);
完整的Demo请看。
没有更多推荐了，华为怎么办除强制竖屏
按时间排序
亲，你的手机型号是什么啊？以麦芒5为例，从状态栏处向下滑动，打开通知面板，在“开关”页签下，点击“自动旋转”，快速开启或关闭自动旋转屏幕功能
登陆，口口，只输帐号，然后，点，忘记密码，通过…二代密保找回， 找回后，重设密码，下面有一个解除手机绑定，在前面的框架里打勾， 确定，ok解除绑定， 阳阳，给分…
说明后，再按照流程刷机，应该可以解决,注意刷机时不要随意移动机器，不要进行其他操作，并且保证电源充足。如果无法解决建议送修。希望对你有帮助，望采纳。玩转数码产品团竭诚为你解答，欢迎各界数码达人加盟
进入 recovery后双请
重力感应的问题。把重力感应调一下，在设置，显示，那个g开头的神马的。然后将手机放到自己看照片最习惯的位置，点击调试，几秒后就ok喽
双清会损失全部的手机数据，你用手机连接电脑，一般电脑的安全软件里都有手机锁屏密码清除，然后点击就行了
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：红米手机 &
电视盒子 &
智能硬件 &
发烧级手机控
扫码下载App一键签到 升级加速
小米电视怎么强制竖屏显示
扫一扫！手机看帖更爽
我买了支架，电视竖屏挂着，电视怎么竖屏显示？1.屏幕方向控制 Orientation Control& + xShortcut Free 失败2.终极旋转控制失败3.手机无线传输过去，显示横屏，手机调成横屏，电视同时变成竖屏，马上又变为横屏，应该是电视哪个系统软件强制横屏了电视是小米电视4A，求解决方法
扫描二维码，手机查看本帖
京ICP证110507号 京ICP备号