Ottimizza layout mobile e setup icone APK Android
- Forza orientamento landscape e blocca scroll su mobile - Aggiunge media queries responsive per schermi <768px - Usa 100dvh e position:fixed per layout fullscreen - Crea setup-android-icons.sh per generazione automatica icone Android - Configura Capacitor per landscape, disabilita splash screen - Refactoring Dockerfile con ImageMagick per icone multi-densità
This commit is contained in:
14
Dockerfile
14
Dockerfile
@@ -12,6 +12,7 @@ RUN apt-get update && apt-get install -y \
|
||||
wget \
|
||||
openjdk-17-jdk \
|
||||
build-essential \
|
||||
imagemagick \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Installa Node.js 18.x (LTS compatibile con Vite)
|
||||
@@ -67,4 +68,15 @@ RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps
|
||||
COPY . .
|
||||
|
||||
# Build script
|
||||
CMD ["bash", "-c", "npm run build && npx cap add android && npx cap sync && cd android && ./gradlew assembleDebug --no-daemon && mkdir -p /app/output && cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && echo '\n✅ APK generato: /app/output/segnapunti-debug.apk'"]
|
||||
CMD ["bash", "-c", "\
|
||||
npm run build && \
|
||||
npx cap add android && \
|
||||
npx cap sync && \
|
||||
sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"landscape\"/g' android/app/src/main/AndroidManifest.xml && \
|
||||
bash setup-android-icons.sh && \
|
||||
cd android && ./gradlew assembleDebug --no-daemon && \
|
||||
mkdir -p /app/output && \
|
||||
cp app/build/outputs/apk/debug/app-debug.apk /app/output/segnapunti-debug.apk && \
|
||||
echo '' && \
|
||||
echo 'APK generato: /app/output/segnapunti-debug.apk'\
|
||||
"]
|
||||
|
||||
@@ -5,5 +5,17 @@
|
||||
"bundledWebRuntime": false,
|
||||
"server": {
|
||||
"androidScheme": "https"
|
||||
},
|
||||
"android": {
|
||||
"allowMixedContent": true,
|
||||
"webContentsDebuggingEnabled": true
|
||||
},
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchShowDuration": 0
|
||||
}
|
||||
},
|
||||
"preferences": {
|
||||
"orientation": "landscape"
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="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" />
|
||||
<title>Segnapunti - Anto</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
40
setup-android-icons.sh
Normal file
40
setup-android-icons.sh
Normal file
@@ -0,0 +1,40 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "Configurazione icone Android..."
|
||||
|
||||
# Rimuove icone default di Capacitor
|
||||
rm -rf android/app/src/main/res/mipmap-*
|
||||
|
||||
# Crea directory per tutte le densità
|
||||
for density in mdpi hdpi xhdpi xxhdpi xxxhdpi; do
|
||||
mkdir -p android/app/src/main/res/mipmap-$density
|
||||
done
|
||||
|
||||
# Mappa densità -> dimensioni
|
||||
declare -A sizes=(
|
||||
["mdpi"]="48"
|
||||
["hdpi"]="72"
|
||||
["xhdpi"]="96"
|
||||
["xxhdpi"]="144"
|
||||
["xxxhdpi"]="192"
|
||||
)
|
||||
|
||||
# Genera icone per ogni densità
|
||||
for density in "${!sizes[@]}"; do
|
||||
size="${sizes[$density]}"
|
||||
echo " Generando icone ${size}x${size} per $density..."
|
||||
|
||||
convert public/segnap-512x512.png -resize ${size}x${size} \
|
||||
android/app/src/main/res/mipmap-$density/ic_launcher.png
|
||||
|
||||
convert public/segnap-512x512.png -resize ${size}x${size} \
|
||||
android/app/src/main/res/mipmap-$density/ic_launcher_round.png
|
||||
done
|
||||
|
||||
# Icona per il file APK (visibile da PC)
|
||||
mkdir -p android/app/src/main/res/drawable
|
||||
convert public/segnap-512x512.png -resize 512x512 \
|
||||
android/app/src/main/res/drawable/icon.png
|
||||
|
||||
echo "Icone configurate con successo!"
|
||||
@@ -1,17 +1,33 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
touch-action: pan-x pan-y;
|
||||
height: 100%
|
||||
touch-action: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: contain;
|
||||
overscroll-behavior: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
height: 100dvh; /* Dynamic viewport height per mobile */
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -38,8 +54,13 @@ button:focus-visible {
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.campo {
|
||||
user-select: none;
|
||||
@@ -121,4 +142,45 @@ button:focus-visible {
|
||||
background-color: rgb(206, 247, 3);
|
||||
color: blue;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Responsive mobile */
|
||||
@media (max-width: 768px) {
|
||||
.hea {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.hea span {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.hea img {
|
||||
width: 18px !important;
|
||||
}
|
||||
|
||||
.punt {
|
||||
font-size: 45vh;
|
||||
}
|
||||
|
||||
.form {
|
||||
font-size: 4vh;
|
||||
border-top: #fff dashed 15px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.formdiv {
|
||||
font-size: 15vh;
|
||||
}
|
||||
|
||||
.bot button {
|
||||
font-size: 0.7em;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.bot img {
|
||||
width: 20px !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user