Skip to content

Fix bug and add required meta tag #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix bug and add required meta tag #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
894da8e
Fix incorrect width/height in private mode
VastBlast Oct 21, 2024
460b6ca
Add required meta tag, if not already added
VastBlast Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,20 @@ function iosPWASplash(icon, color = 'white') {
}

// Calculate the device's width and height
const deviceWidth = screen.width;
const deviceHeight = screen.height;
let deviceWidth = screen.width;
let deviceHeight = screen.height;

// The following detects the device's width and height in private mode
if (window.visualViewport?.width) {
const deviceWidthPM = Math.round(window.visualViewport.width * window.visualViewport.scale);
// if not private mode, then both values should be equal so the code will not run
if (deviceWidth > deviceWidthPM) {
deviceWidth = deviceWidthPM;
// in private mode, uses the direct ratio to calculate the height since this is the only way as of now
deviceHeight = (284 / 131) * deviceWidth;
}
}

// Calculate the pixel ratio
const pixelRatio = window.devicePixelRatio || 1;
// Create two canvases and get their contexts to draw landscape and portrait splash screens.
Expand Down Expand Up @@ -57,6 +69,14 @@ function iosPWASplash(icon, color = 'white') {
const imageDataURL = canvas.toDataURL('image/png');
const imageDataURL2 = canvas2.toDataURL('image/png');

// Add apple-mobile-web-app-capable if not already present
if (!document.querySelector('meta[name="apple-mobile-web-app-capable"]')) {
const metaTag = document.createElement('meta');
metaTag.setAttribute('name', 'apple-mobile-web-app-capable');
metaTag.setAttribute('content', 'yes');
document.head.appendChild(metaTag);
}

// Create the first startup image <link> tag (splash screen)

const appleTouchStartupImageLink = document.createElement('link');
Expand Down