lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

mobile scaling and rotation

Browse source
This commit is contained in:
Matt Walsh 2022-12-09 13:11:53 -06:00
parent 1cf9f41ca0
commit 6a1e2da11e
5 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
server/scripts/modules/navigation.mjs
View file

@ -252,11 +252,11 @@ const getDisplay = (index) => displays[index];
// resize the container on a page resize // resize the container on a page resize
const resize = () => { const resize = () => {
const widthZoomPercent = window.innerWidth / 640; const widthZoomPercent = document.body.clientWidth / 640;
const heightZoomPercent = window.innerHeight / 480; const heightZoomPercent = document.body.clientHeight / 480;
const scale = Math.min(widthZoomPercent, heightZoomPercent); const scale = Math.min(widthZoomPercent, heightZoomPercent);
console.log(scale, document.body.clientWidth);
if (scale < 1.0 || document.fullscreenElement) { if (scale < 1.0 || document.fullscreenElement) {
document.getElementById('container').style.zoom = scale; document.getElementById('container').style.zoom = scale;
} else { } else {

2
server/styles/main.css
View file

File diff suppressed because one or more lines are too long

2
server/styles/main.css.map
View file

File diff suppressed because one or more lines are too long

1
server/styles/scss/_page.scss
View file

@ -31,6 +31,7 @@ button {
#txtAddress { #txtAddress {
width: 490px; width: 490px;
font-size: 16pt; font-size: 16pt;
max-width: calc(100% - 8px);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: #000000; background-color: #000000;

3
views/index.ejs
View file

@ -9,8 +9,7 @@
<meta name="keywords" content="WeatherStar 4000+" /> <meta name="keywords" content="WeatherStar 4000+" />
<meta name="author" content="Matt Walsh" /> <meta name="author" content="Matt Walsh" />
<meta name="application-name" content="WeatherStar 4000+" /> <meta name="application-name" content="WeatherStar 4000+" />
<meta name="viewport" content="width=device-width,initial-scale=1;maximum-scale=1;minimum-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />