It is currently 19 February 2025, 8:21 Advanced search

Problemi di Layout in un Applicazione mobile compilata 23.0

Domande e risposte su come utilizzare Instant Developer Foundation al meglio

Re: Problemi di Layout in un Applicazione mobile compilata 2

Postby Jerome Manalo » 26 March 2024, 16:59

d.pierangeli wrote:Puoi provare a mettere questo nel CSS e a riprovare?

Code: Select all

@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 2),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 393px) and (device-height : 852px) and (-webkit-device-pixel-ratio : 3),
only screen and (width : 393px) and (height : 852px) and (-webkit-device-pixel-ratio : 2),
only screen and (width : 393px) and (height : 798px) and (-webkit-device-pixel-ratio : 3),
only screen and (width : 393px) and (height : 852px) and (-webkit-device-pixel-ratio : 3),
only screen and (width : 430px) and (height : 878px) and (-webkit-device-pixel-ratio : 3),
only screen and (width : 430px) and (height : 932px) and (-webkit-device-pixel-ratio : 3) {
 
body.body-platform-ios scroll-content.form-header-has-caption.notch-padding {
    margin-top: calc(env(safe-area-inset-top) + 40px);
    margin-top: calc(constant(safe-area-inset-top) + 40px);
    height: calc(100% - 44px - env(safe-area-inset-top));
    height: calc(100% - 44px - constant(safe-area-inset-top));
  }
}




Io ho inserito nella custom css il codice che hai inviato ma la parte evidenziata delle foto continua ad essere coperta dal notch
Attachments
img2.jpg
img2.jpg (99.41 KiB) Viewed 408 times
Jerome Manalo
 
Posts: 21
Joined: 29 April 2020, 14:59

Re: Problemi di Layout in un Applicazione mobile compilata 2

Postby d.pierangeli » 26 March 2024, 18:07

Allora non ti riesco a aiutare qui, devi mandare un progetto.
User avatar
d.pierangeli
Pro Gamma
Pro Gamma
 
Posts: 8035
Joined: 30 September 2010, 15:35

Re: Problemi di Layout in un Applicazione mobile compilata 2

Postby Jerome Manalo » 27 March 2024, 13:45

d.pierangeli wrote:Allora non ti riesco a aiutare qui, devi mandare un progetto.


Ciao Ti allego un mini progetto di test con il css da te consigliato , ma il notch rimane coperto.

Il progetto è compilato con la 20.5 come la nostra applicazione in produzione.

Il Notch rimane coperto anche se il mini progetto viene compilato con la 23.0
Attachments
TEST Notch (2).zip
(469.31 KiB) Downloaded 51 times
Jerome Manalo
 
Posts: 21
Joined: 29 April 2020, 14:59

Re: Problemi di Layout in un Applicazione mobile compilata 2

Postby d.pierangeli » 27 March 2024, 15:53

Il problema dipende dal tema, Mobile7 è obsoleto e non più manutenuto, quindi ogni anno devi scriverti a mano le media query e tenerle aggiornate.

Ti consiglierei di passare l'applicazione a un tema supportato, Quadro o Ionic.

Al momento l'ultimo update di IOS ha rotto le media query di Quadro [ :( ], per cui le applicazioni sono un pò più strette, ci sto guardando adesso.

Edit: risolto, queste sono le media query per il tema Quadro non fluid da mettere temporaneamente in custom.css ( forse sono valide anche Mobile7 a parte il background ) :

Code: Select all

/* iPhone 13 Mini, iPhone 12 Mini, iPhone 11 Pro, iPhone XS, and iPhone X*/
/* IPhone XR  and 11 */
/* iPhone 11 Pro Max and iPhone XS Max */
/* iPhone 13, iPhone 13 Pro, iPhone 12, iPhone 12 Pro, IPhone 14, IPhone 14 PRO */
/* iPhone 13 Max, iPhone 12 Pro Max, IPhone 14 MAX */
/* IPhone 14 PRO MAX */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3),
only screen and (width: 430px) and (height: 839px) and (-webkit-device-pixel-ratio : 3) {
 
  body {
    background: #0081C2;
  }
 
  @supports(padding: env(safe-area-inset-top)) {
    #wep {
      top: env(safe-area-inset-top);
      height: calc(100%  - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
   
    .tab-img-0, .selected-tab-img-0, .page-icon-0, .selected-page-icon-0 {
      -webkit-mask-size: 30px 30px !important;
    }
   
    tab-caption-0, .selected-tab-caption-0, .page-header-container-0, .selected-page-header-container-0, .selected-tab-caption-tableft-0, .tab-caption-tableft-0, .selected-tab-caption-tabright-0, .tab-caption-tabright-0 {
      font-size: 12px;
    }
 
    tab-caption-container-0, .selected-tab-caption-container-0 {
      margin-left: 15px;
    }
  }
}

@media only screen and (orientation: landscape) and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2),
only screen and (orientation: landscape) and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (width: 430px) and (height: 839px) and (-webkit-device-pixel-ratio : 3) {
  @supports(padding: env(safe-area-inset-top)) {
    body {
      background: #777777;
    }
   
    #wep {
      left: 44px;
      width: calc(100%  - 88px);
      height: calc(100% - env(safe-area-inset-bottom));
    }
   
    .tab-img-0, .selected-tab-img-0, .page-icon-0, .selected-page-icon-0 {
      -webkit-mask-size: 30px 30px !important;
    }
   
    tab-caption-0, .selected-tab-caption-0, .page-header-container-0, .selected-page-header-container-0, .selected-tab-caption-tableft-0, .tab-caption-tableft-0, .selected-tab-caption-tabright-0, .tab-caption-tabright-0 {
      font-size: 12px;
    }
 
    tab-caption-container-0, .selected-tab-caption-container-0 {
      margin-left: 15px;
    }
  }
}


User avatar
d.pierangeli
Pro Gamma
Pro Gamma
 
Posts: 8035
Joined: 30 September 2010, 15:35

Re: Problemi di Layout in un Applicazione mobile compilata 2

Postby Jerome Manalo » 28 March 2024, 8:36

d.pierangeli wrote:Il problema dipende dal tema, Mobile7 è obsoleto e non più manutenuto, quindi ogni anno devi scriverti a mano le media query e tenerle aggiornate.

Ti consiglierei di passare l'applicazione a un tema supportato, Quadro o Ionic.

Al momento l'ultimo update di IOS ha rotto le media query di Quadro [ :( ], per cui le applicazioni sono un pò più strette, ci sto guardando adesso.

Edit: risolto, queste sono le media query per il tema Quadro non fluid da mettere temporaneamente in custom.css ( forse sono valide anche Mobile7 a parte il background ) :

Code: Select all

/* iPhone 13 Mini, iPhone 12 Mini, iPhone 11 Pro, iPhone XS, and iPhone X*/
/* IPhone XR  and 11 */
/* iPhone 11 Pro Max and iPhone XS Max */
/* iPhone 13, iPhone 13 Pro, iPhone 12, iPhone 12 Pro, IPhone 14, IPhone 14 PRO */
/* iPhone 13 Max, iPhone 12 Pro Max, IPhone 14 MAX */
/* IPhone 14 PRO MAX */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3),
only screen and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3),
only screen and (width: 430px) and (height: 839px) and (-webkit-device-pixel-ratio : 3) {
 
  body {
    background: #0081C2;
  }
 
  @supports(padding: env(safe-area-inset-top)) {
    #wep {
      top: env(safe-area-inset-top);
      height: calc(100%  - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
   
    .tab-img-0, .selected-tab-img-0, .page-icon-0, .selected-page-icon-0 {
      -webkit-mask-size: 30px 30px !important;
    }
   
    tab-caption-0, .selected-tab-caption-0, .page-header-container-0, .selected-page-header-container-0, .selected-tab-caption-tableft-0, .tab-caption-tableft-0, .selected-tab-caption-tabright-0, .tab-caption-tabright-0 {
      font-size: 12px;
    }
 
    tab-caption-container-0, .selected-tab-caption-container-0 {
      margin-left: 15px;
    }
  }
}

@media only screen and (orientation: landscape) and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2),
only screen and (orientation: landscape) and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3),
only screen and (orientation: landscape) and (width: 430px) and (height: 839px) and (-webkit-device-pixel-ratio : 3) {
  @supports(padding: env(safe-area-inset-top)) {
    body {
      background: #777777;
    }
   
    #wep {
      left: 44px;
      width: calc(100%  - 88px);
      height: calc(100% - env(safe-area-inset-bottom));
    }
   
    .tab-img-0, .selected-tab-img-0, .page-icon-0, .selected-page-icon-0 {
      -webkit-mask-size: 30px 30px !important;
    }
   
    tab-caption-0, .selected-tab-caption-0, .page-header-container-0, .selected-page-header-container-0, .selected-tab-caption-tableft-0, .tab-caption-tableft-0, .selected-tab-caption-tabright-0, .tab-caption-tabright-0 {
      font-size: 12px;
    }
 
    tab-caption-container-0, .selected-tab-caption-container-0 {
      margin-left: 15px;
    }
  }
}




Ciao questo css sembra risolvere il problema del notch.
Prima o poi passeremo anche noi a IONIC
Grazie mille.
Jerome Manalo
 
Posts: 21
Joined: 29 April 2020, 14:59

Previous

Return to Tips & Tricks - Foundation

Who is online

Users browsing this forum: No registered users and 42 guests