ändern CSS-Anzeige, wenn Useragent, wenn Benutzer auf iPhone & window.navigator.standalone == true

Ich mag würde eine WebApp und Anzeigen verschiedene Inhalte bauen, wennändern CSS-Anzeige, wenn Useragent, wenn Benutzer auf iPhone & window.navigator.standalone == true

Benutzer die WebApp über ihre Safari-Browser öffnen oder
, wenn sie die WebApp durch einen Webclip von Startbildschirm öffnen

die Erkennung funktioniert - ich überprüfe es mit document.write - aber die CSS-Eigenschaft display ändert sich nicht. Was mache ich falsch?

Danke im Voraus!

<html> 
<head> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<script type="text/javascript"> 
if (window.navigator.userAgent.indexOf('iPhone') != -1) { 
    if (window.navigator.standalone == true) { 
     // document.write('<p>homescreen<\/p>'); 
     document.getElementById("homescreen").style.display = 'block'; 
    }else{ 
     // document.write('<p>safari<\/p>'); 
     document.getElementById("safari").style.display = 'block'; 
    } 
}else{ 
     // document.write('<p>no iOS<\/p>'); 
     document.getElementById("ios").style.display = 'block'; 
} 
</script> 
</head> 
<body> 

<div id="homescreen" style="display:none;"> 
you opened it from the homescreen 
</div> 

<div id="safari" style="display:none;"> 
you opened it from safari 
</div> 


<div id="ios" style="display:none;"> 
you have no iOS 
</div> 



</body> 
</html>

Quelle

2012-03-30 Dominic

Die <script> ausgewertet wird, bevor das DOM geladen wird, so document.getElementById("xx") kehrt undefined. Überprüfen Sie Ihre Javascript-Fehler Konsole, es gibt wahrscheinlich einen Fehler wie: "Uncaught TypeError: Kann Eigenschaft 'Stil' von Null nicht lesen".

entweder den <script> Block bis zum Ende des Körpers bewegen

Noch besser wäre es, verwenden Sie jQuery und so etwas wie finden http://api.jquery.com/ready/

$(function() { 
    if (window.navigator.userAgent.indexOf('iPhone') != -1) { 
    if (window.navigator.standalone) { 
     $('#homescreen').show();   
    }else{ 
     $('#safari').show(); 
    } 
    }else{ 
    $("#ios").show(); 
    } 
});

Oder was könnte noch besser sein und Eine flexiblere Alternative ist das Anhängen von Klassen an das Element <body>. Dann können Sie einfach alles mithilfe von CSS ein- und ausblenden.

$(function() { 
    if (window.navigator.standalone) { 
    $('body').addClass('standalone'); 
    } 
});

Dann können im CSS alle Abschnitte basierend auf diesen Bezeichnern einfach ein-/ausgeblendet werden.

.someContent { display: none; } 
body.standalone .someContent { display: block; }

Für den mobilen Selektor (iPhone), könnten Sie sogar den JS-Useragent-Schalter vermeiden (FYI, Ihre indexOf würde iPads oder iPod Touches nicht überein) und setzen besser auf CSS-Medienanfragen wie @media only screen and (max-device-width: 480px) (dies ist für eine iPhone Landschaft & Porträt).

Quelle

2012-03-30 12:48:37 lwe

Absolut großartig! Vielen Dank! Funktioniert perfekt!!!! – Dominic

Arbeitete für mich, ich musste diff font-family für Android und iPhone, normales Web verwenden. Ich fügte Klasse für jede Verwendung oben hinzu Es funktionierte. Vielen Dank – jbmyid

ändern CSS-Anzeige, wenn Useragent, wenn Benutzer auf iPhone & window.navigator.standalone == true

Antwort

Verwandte Themen