Skip to content

Commit a24fc35

Browse files
MakinoharaShokoMakinoharaShoko
committed
fix: safari view problem
1 parent 1bebc83 commit a24fc35

1 file changed

Lines changed: 77 additions & 22 deletions

File tree

‎packages/webgal/index.html‎

Lines changed: 77 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
<link rel="manifest" href="/manifest.json" />
88
<title>WebGAL</title>
99
<style>
10+
html,
1011
body {
12+
margin: 0;
1113
background: black;
1214
}
1315

@@ -129,6 +131,34 @@
129131
.title-enter-container__link-to-github > div {
130132
padding: 0 0 0.25em 0;
131133
}
134+
135+
html.ios-phone-viewport,
136+
html.ios-phone-viewport body {
137+
overflow: hidden;
138+
overscroll-behavior: none;
139+
background: black;
140+
}
141+
142+
html.ios-phone-viewport body {
143+
width: 2560px;
144+
height: 1440px;
145+
position: relative;
146+
}
147+
148+
html.ios-phone-viewport #ebg {
149+
display: none;
150+
}
151+
152+
html.ios-phone-viewport #root,
153+
html.ios-phone-viewport .html-body__title-enter {
154+
width: 2560px;
155+
height: 1440px;
156+
position: absolute;
157+
top: 0;
158+
left: 0;
159+
transform: none !important;
160+
transform-origin: top left;
161+
}
132162
</style>
133163
</head>
134164
<body>
@@ -156,11 +186,34 @@
156186
<!-- 在窗口大小改变时进行强制缩放 -->
157187
<script>
158188
(() => {
159-
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
160-
const resize = () => {
161-
const targetHeight = 1440; // 目标高度
162-
const targetWidth = 2560; // 目标宽度
189+
const targetHeight = 1440;
190+
const targetWidth = 2560;
191+
const userAgent = navigator.userAgent;
192+
const platform = navigator.platform;
193+
const maxTouchPoints = navigator.maxTouchPoints || 0;
194+
const isIPhoneLike = /iPhone|iPod/i.test(userAgent);
195+
const isIPadLike = /iPad/i.test(userAgent) || (platform === 'MacIntel' && maxTouchPoints > 1);
196+
const isIOS = isIPhoneLike || isIPadLike;
197+
const isIOSPhone = isIOS && isIPhoneLike;
198+
const html = document.documentElement;
199+
const body = document.body;
200+
const root = document.querySelector('#root');
201+
const titleEnter = document.querySelector('.html-body__title-enter');
202+
const effectBackground = document.querySelector('.html-body__effect-background');
203+
let viewportMeta = document.querySelector('meta[name="viewport"]');
204+
205+
window.__WEBGAL_DEVICE_INFO__ = { isIOS, isIOSPhone };
206+
207+
const ensureViewportMeta = () => {
208+
if (!viewportMeta) {
209+
viewportMeta = document.createElement('meta');
210+
viewportMeta.name = 'viewport';
211+
document.head.appendChild(viewportMeta);
212+
}
213+
return viewportMeta;
214+
};
163215

216+
const resize = () => {
164217
const h = window.innerHeight; // 窗口高度
165218
const w = window.innerWidth; // 窗口宽度
166219
const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
@@ -173,9 +226,6 @@
173226
let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
174227
let transform = '';
175228
let effectBackgroundTransform = '';
176-
const root = document.querySelector('#root'); // 获取根元素
177-
const titleEnter = document.querySelector('.html-body__title-enter');
178-
const effectBackground = document.querySelector('.html-body__effect-background');
179229
const elements = [root, titleEnter];
180230
if (w > h) {
181231
if (effectBackground) {
@@ -224,13 +274,7 @@
224274
}
225275
};
226276
if (!isIOS) {
227-
// 非 IOS
228-
// 创建一个新的 meta 标签
229-
const metaTag = document.createElement('meta');
230-
metaTag.name = 'viewport';
231-
metaTag.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
232-
// 将该标签添加到 head 中
233-
document.head.appendChild(metaTag);
277+
ensureViewportMeta().content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
234278
resize();
235279
window.onload = resize;
236280
window.onresize = resize;
@@ -243,22 +287,33 @@
243287
}
244288
};
245289
} else {
246-
// IOS
247-
const metaTag = document.createElement('meta');
248-
metaTag.name = 'viewport';
249-
metaTag.content = 'width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1';
250-
// 将该标签添加到 head 中
251-
document.head.appendChild(metaTag);
252290
const styleTag = document.createElement('style');
253291
styleTag.textContent = '* { font-synthesis: none !important; }';
254292
document.head.appendChild(styleTag);
293+
if (isIOSPhone) {
294+
html.classList.add('ios-phone-viewport');
295+
body.classList.add('ios-phone-viewport');
296+
ensureViewportMeta().content = `width=${targetWidth}, height=${targetHeight}, user-scalable=no, viewport-fit=cover`;
297+
if (effectBackground) {
298+
effectBackground.style.transform = '';
299+
}
300+
for (const element of [root, titleEnter]) {
301+
if (element) {
302+
element.style.left = '0';
303+
element.style.top = '0';
304+
element.style.transform = 'none';
305+
}
306+
}
307+
} else {
308+
ensureViewportMeta().content = 'width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1';
309+
}
255310
}
256311
})();
257312
</script>
258313
<!-- 注册 Service Worker -->
259314
<script>
260315
(() => {
261-
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
316+
const isIOS = window.__WEBGAL_DEVICE_INFO__?.isIOS ?? !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
262317
if ('serviceWorker' in navigator && !isIOS) {
263318
navigator.serviceWorker
264319
.register('./webgal-serviceworker.js')
@@ -274,7 +329,7 @@
274329
<!-- 首屏加载 -->
275330
<script>
276331
(() => {
277-
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
332+
const isIOS = window.__WEBGAL_DEVICE_INFO__?.isIOS ?? !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
278333
let enterPromiseResolve;
279334
const enterPromise = new Promise((res) => {
280335
enterPromiseResolve = res;

0 commit comments

Comments
 (0)