cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile device detection and responsive scaling in index.html

Browse Source 
Implemented CSS media queries to enhance responsiveness for mobile devices. Adjusted layout and font sizes for better visibility on portrait orientation with coarse pointers.
Not perfect, but an improvement
This commit is contained in:
Z. Cliffe Schreuders
2025-03-28 11:59:15 +00:00
parent 7e758e3d86
commit e2c2862e8e
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -1107,6 +1107,24 @@
transform: scale(1.25); /* Adjust the scale factor as needed */
transform-origin: center; /* Set the origin for scaling */
}
/* Mobile device detection and responsive scaling */
@media (orientation: portrait) and (pointer: coarse) {
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
transform-origin: top left;
}
#game-container {
max-width: 100vw;
overflow: visible;
}
/* Increase font sizes by percentage */
.notification-title, .notification-message, .note-title, .bluetooth-device-name, .biometric-sample-name, .note-text, .bluetooth-device-details, .biometric-sample-details, #notes-title, #bluetooth-title, #biometrics-title, #notes-close, #bluetooth-close, #biometrics-close, .notification-close {
font-size: 200%;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easystarjs@0.4.4/bin/easystar-0.4.4.js"></script>