Kann nicht versteckt Komponenten Benutzeroberfläche Safari

StackOverflow https://stackoverflow.com/questions/1403478

  •  05-07-2019
  •  | 
  •  

Frage

Ich bin sehr neu für iPhone Web-Entwickler. Ich begann mit Safari Web Content-Führer zu lesen. Dann fand ich, dass wir Benutzeroberfläche zum Beispiel Adressleiste des Safari verstecken können. Deshalb folgte ich den Lehrer. Das Ergebnis ist nicht das, was ich erwartet hatte. Die Adressleiste noch zeigen.

Ich habe diesen Meta-Tag in HTML-Datei.

und das dieses mein Code 

<head>     
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello iPhone Web App</title>
    <style type="text/css">
          form{
           width:100%;
         }

         #searchBox{
          font-size:25px;
        width:50%;
         }
         #send{
          font-size:25px;
         }

         #containerTop{
           text-align:center;
           width:100%;
        }

    </style>
</head>
<body>
    <form method="get">
        <div id="containerTop">
            <input type="text" id="searchBox" name="search" autocapitalize="off" size="15" maxlength="128" />
            <input type="submit" id="send" value="ค้นหา" />
        </div>         
    </form>
</body>

Ich freue mich auf Ihre Antwort, danke

War es hilfreich?

Lösung

„apple-mobile-web-app-fähig“ funktioniert nur, es ist Magie, wenn Sie Ihre WebApp starten, nachdem eine Verbindung zum Home-Bildschirm gespeichert zu haben, und starten Sie Ihre WebApp aus dem neuen Symbol.

Für die regelmäßigen Web-Seiten müssen Sie die Adressleiste aus der Ansicht scrollen mit: 

<script type="text/javascript">
window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0,0); }, 100); }, true);
</script>

Die Navigationsleiste am unteren Rand des Bildschirms permanent ist für eine regelmäßige Web-Seiten, ist aber abnehmbar für WebApps (Zum Home-Bildschirm gespeichert), um die "apple-mobile-web-app-capable" Meta-Tag verwendet wird.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top