移动端强制横竖屏草稿
# 需求
# 定义：
- 锁定竖屏模式：ios下打开锁定竖屏功能，或android下关闭屏幕自动旋转功能
# 效果：
页面是竖/横屏展示的，要求无论是否为锁定竖屏模式，任意手持方向下页面保持不动。
譬如，对于竖屏式h5页面，竖排手持下显示正常，对于横排手持，在非锁定竖屏模式下页面将会旋转，改变后的页面“膨胀了”，不利于交互
常见做法是横排手持且非锁定竖屏模式下用提示蒙版提醒用户保持竖排手持。
同样的，对于横屏式h5页面，在非锁定竖屏方式且横排手持下显示正常，对于竖排手持或锁定竖屏模式的情况，页面宽为屏幕的高度，高为屏幕的宽度。
常见做法是对于竖屏显示时，提示用户关闭锁定竖屏模式并旋转屏幕。
综上，通用做法会增加用户的操作。我们将采用css的旋转元素方法来解决问题。
# 处理
- 对于竖屏式h5页面,假设页面长这样
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
#print {
background-color: gray;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#print p {
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="print">
<p>test</p>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
竖屏和非锁定竖屏模式横排手持的效果分别如下：
非锁定竖屏模式横排手持显示的效果不是我们想要的，我们要的效果应该是下面这种：
那么我们代码处理如下（放在body底部）：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
var trans = function(){
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%');
}
}
// 先进行一次旋转判定，防止一开始就是横屏时布局不对
trans()
window.addEventListener(evt, trans, false);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- 对于横屏式h5页面,采用和上面一样的页面，
非锁定竖屏方式且横排手持和竖屏的效果分别如下：
竖屏显示的效果不是我们想要的，我们要的效果应该是下面这种：
那么我们代码处理如下（放在body底部）：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
var trans = function(){
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%');
}
}
// 先进行一次旋转判定，一开始就是竖屏时需要进行元素旋转
trans()
window.addEventListener(evt, trans, false);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
总的来说,根元素需要应用绝对布局。对于竖屏式h5，在横排时需要进行旋转；对于横屏式h5，在竖排时需要进行旋转。
通用代码如下：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function init({ selector = "body", isVertical = false }) {
let evt = "onorientationchange" in window ? "orientationchange" : "resize";
const rotateDeg = isVertical ? 'rotate(-90deg)' : 'rotate(90deg)'
let fn = function () {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
let $print = $(selector);
let isVertHandMode = width < height
if ((isVertHandMode && isVertical) || (!isVertHandMode && !isVertical)) {
$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', rotateDeg);
$print.css('transform-origin', '50% 50%');
}
}
// 先进行一次旋转判定
fn()
window.addEventListener(evt, fn, false);
}
</script>
<script>
// //竖屏h5应用
// init({
// selector:'#print',
// isVertical: true
// })
//横屏h5应用
init({
selector:'#print',
isVertical: false
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 存在问题与解决方案
# 根布局
以上做法需要根布局非 static ，否则应用了布局以及旋转后，将会造成布局错乱。
对于自己的应用，可以控制布局，如果是提供一个插件给其他网站用，如何实现兼容？
# canvas
# 响应式处理
元素的大小发生改变
使用 vh,vw 的样式
# 原生元素的问题
<select>元素被旋转后，下拉选项仍保持原方向不变
键盘弹出方向不对
# 点击事件坐标不统一
# 缩放比例的设置，font-size
# 拓展阅读
编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56