设为首页收藏本站

密通学院»密通学院 › 站长乐园 › 教程分享 › 移动端如何让页面强制横屏

发新帖

查看: 3477|回复: 0

移动端如何让页面强制横屏

282 主题	27 回帖	8万铜板

Rank: 8 Rank: 8

积分: 89153

发消息

发表于 2019-4-13 00:34:31 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

现在有部分网友通过马甲生成app，但是对于有的页面需要横屏显示就没有办法了，可以通过以下办法解决：

在竖屏模式下，写一个横屏的div，然后把它转过来。

<body class="webpBack">
<div id="print">
<p>lol</p>
</div>
</body>

复制代码

css如下：

复制代码

把print这个div在竖屏模式下横过来，横屏状态下不变。所以在portrait下，没定义它的宽高。会通过下面的js来补。

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if( width < height ){
console.log(width + " " + height);
$print = $('#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这个div的宽高设置下，对齐，然后旋转。
但是这样的坏处是如果用户手机的旋转屏幕按钮开着，那么当手机横过来之后，会造成一定的悲剧。解决办法如下:

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
console.log(evt);
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
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%');
}
else{
$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);

复制代码

OK，搞定。
http://www.chubao.cn/s/godness/index.html

如果您有业务需求，可以和我联系：

回复

使用道具举报

发新帖

首页|Archiver|手机版|小黑屋|密通学院：专业网络营销服务商

GMT+8, 2024-12-27 10:15 , Processed in 0.119141 second(s), 24 queries

Powered by XMT Inc. © 2015-2025 ArrayV1.0　豫ICP备17022382号

系统运营：密城通豫公网安备 41018302000212 号

快速回复 返回顶部 返回列表