Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Rassegna di soluzioni per differenti problematiche di visualizzazione su dispositivi Apple.

---

Background-image on Apple devices

Immagine di sfondo su dispositivi Apple

Sfortunatamente, Apple Safari ha un problema nel rendering di immagini di sfondo fisse.
Per risolvere il problema, in caso si voglia caricare un'immagine come sfondo fisso del sito web, bisogna usare queste regole di stile:

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(../img/bg.jpg) center top;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Fix text size on iOS devices

Fissare dimensione testo su dispositivi iOS

Safari su iPhone aumenta automaticamente le dimensioni del testo. Per ovviare al problema, aggiungiamo queste regole di stile al body.

body {
-webkit-text-size-adjust:100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

Activate scroll on iOS devices

Attivare lo scroll su dispositivi iOS

Lo scroll non funziona su iPhone se non si aggiungono queste regole:

overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;

Change specific css rules for display on iOS devices

Cambiare specifiche regole di stile per la visualizzazione su dispositivi iOS

Esempio:

<script>
// show alternative content to iOS users (no background-attachment fixed )
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS){
    $(function() {
    $(".parallax ").css("background-attachment","scroll");
    //add more rules here
    });
}
</script>

Change specific css rules for display on Safari browser

Cambiare specifiche regole di stile per la visualizzazione su browser Safari

Esempio:

<script>
// show alternative content to Safari users (no background-attachment fixed )
   var userAgent = navigator.userAgent.toLowerCase();
     if (userAgent .indexOf('safari')!=-1){          
          $(".parallax ").css("background-attachment","scroll");
       }
   </script>

Force style settings for form input fields on mobile Safari

Forzare impostazioni di stile per le sezioni input dei form su Safari mobile

Safari su iPhone e iPad applica impostazioni predefinite per i campi input che sovrascrivono le regole di stile classiche.
Si possono forzare tali impostazioni utilizzando queste regole.

input[type="date"], input[type="time"] {
    -webkit-appearance: none;
     border-radius: 0;
}

Bisogna aggiungere i type dei vari input che si vogliono modificare.
La regola border-radius:0 (opzionale) elimina gli angoli arrotondati che vengono applicati da Safari mobile in automatico.

---

Membership index