-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·138 lines (116 loc) · 4.61 KB
/
index.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="testViewport" content="width=device-width,user-scalable=yes,initial-scale=0.33" />
<meta name="keywords"
content="老师好, 北京道明科技有限公司, 老师好在线课外辅导, 老师好在线教育平台, 老师好在线 , 老师好教育, 课外辅导,小升初,中考,高考,期中,期末,语文,英语,数学,历史,物理,化学,考试,轻轻家教,学霸君,一起作业,雅思,扇贝单词,网易公开课,贝瓦儿歌,有道,学而思,沪江,疯狂老师,搜题,跟谁学,新东方">
<meta name="author" content="lshao.cn">
<meta name="description" content="老师好教育平台,老师好在线课外辅导,专注为小学、初中、高中学生提供全科目老师上门1对1辅导。免费试听，精讲重点难点考点因材施教。">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
<title>老师好在线平台 - 北京道明科技有限公司</title>
<!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script> -->
</head>
<body>
<!-- 适配横竖屏 -->
<!-- <div class="bg">
</div> -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!-- <style>
* {
padding: 0;
margin: 0;
}
.bg {
/* position: absolute; */
/* top: 0;
left: 0; */
/* width: 100%;
height: 100%; */
/* background: url(pic.jpg) no-repeat #000; */
/* background-size: cover; */
/* 铺满屏幕，屏幕变小，图片可能显示不下 */
/* background-size: 100% 100%; */
/* 铺满屏幕，随屏幕变化而变化比例，图片可能被拉伸 */
}
@media screen and (orientation: portrait) {
/* 竖屏 */
}
@media screen and (orientation: landscape) {
/* 横屏 */
}
</style>
<script>
// 直接在最外层的div调用该函数即可
changeOrientation($('.bg'));
function changeOrientation($print) {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
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 () {
console.log(evt);
setTimeout(function () {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
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%');
}
}, 300);
}, false);
}
</script> -->
<script>
function updateViewport() {
if (window.orientation === 90) {// 竖屏
// alert(window.orientation);
// 这种适配方式挺好的
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content', 'width=device-width,user-scalable=yes,initial-scale=0.7');
} else {
var mvp = document.getElementById('testViewport');
if (/(iPad)/i.test(navigator.userAgent)) {
mvp.setAttribute('content', 'width=device-width,user-scalable=yes,initial-scale=1');
} else {
mvp.setAttribute('content', 'width=device-width,user-scalable=yes,initial-scale=0.33');
}
}
}
window.addEventListener("orientationchange", function () {
// alert(window.orientation);
updateViewport();
}, false);
// console.log(`navigator`);
updateViewport();
</script>