• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Woran liegt es, dass mein JavaScript nur in Firefox funktioniert?

N

Niemand1982

New member
Guten Abend,

da mein Hoster aufeinmal Gebühren für sein Baukastensystem eingeführt hat, bin ich nun gezwungen die Seiten selber zu schreiben. Soweit klappt auch alles, da ich auf sehr viele "Spielereien" verzichte.

Jedoch habe ich bei der Erkennung, ob der User von einem Mobilgerät oder nicht auf die Seite zugreift ein riesen Problem. Ursprünglich hatte ich es mit unterschiedlichen CSS-Dateien gelöst gehabt. Doch nun möchte ich die Mobileseite gänzlich anders aufgeteilt haben, dafür habe ich in der index.php folgenden JavaScript-Code geschrieben:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="javascript" type="text/javascript>
<!--
if(window.innerWidth <= 800){
document.location.href='mobil/template_mobil.php';}
else{
document.location.href='device/template.php';}
</script>
</head>
</html>

Ich habe die Bedingungen auch vertauscht gehabt. Also abgefragt ob die Innerebreite >=800 ist. In beiden Fällen klappte es vom Androidgerät nur mit dem Firefox richtig. Chrome und der Android-Browser sprangen in beiden Fällen auf die Bedingung >=800.

Woran liegt es und wie kann ich es beheben?

Ich bedanke mich für eure Hilfe.
 
Zuletzt bearbeitet von einem Moderator:
Moinsen aka "guten Abend".

Der Doctype ist ja mal fein old-school ... hehe. Aber gibt es noch häufiger - also zunächst mal kein Beinbruch. :)

Insgesamt sieht Dein DOM unvollständig aus (damit ruhst Du Dich quasi auf der Fehlerkorrektur des Browsers aus) - für Leute, die im Browser eine Weiterleitung per JavaScript deaktiviert haben, wird gar nichts gezeigt. Du solltest Dir also zumindest noch die Mühe machen und einen Hinweis in einem Body-Tag zeigen, dass ein User klicken möchte (wohin auch immer Du ihn schicken würdest wollen). Ich würde behaupten, dass Dein FF dann auch was zeigt - und dann hättest Du den Grund schon gefunden. ;)

Denkanstoß: Smart wird es, wenn Du noch ein DOM-ready vor Dein JavaScript schnallst - wirkt dann etwas eleganter ...

Angenehmen Abend wünsche ich - und natürlich viel Erfolg.
 
Danke für die schnellen Hinweise.

Der Doctype ist keine Absicht gewesen. War nur von der heruntergeladenen Vorlage meines alten Baukastensystems übernommen. Wie bereits geschrieben, bisher hatte ich schlicht das Baukastensystem meines Hosters verwendet gehabt. Da ich aber nicht einsehe plötzlich Geld zu bezahlen, nur weil der Hoster meint das 7 Seiten kostenlos sind ab der 8. irgendwas um die 5€ / Monat wert sind, habe ich mich mit der ganzen Thematik befasst. Wenn ich es richtig weiß müsste ich wohl nur noch
Code: 
 <!DOCTYPE html>
schreiben, um HTML 5 zu verwenden. Stimmt es soweit?

Mein Problem ist nicht, dass FF nix zeigt. Mein Problem ist, dass FF als einziger es richtig anzeigt. Chrome und Co. geben an, dass mein Handy- / Browserbildschirm über 800px groß sei. Ich dachte erst, dass irgendwas an mein Code verkehrt sei. Deshalb habe ich die Abfrage geändert gehabt, also ich frug ob die Bildschirmbreite 800px oder mehr sei. Da ich ja dachte, dass es aufgrund eines Fehlers immer auf else hinausläuft. Aber egal wie ich es abfrage, Chrome und Co. greifen immer auf den Zweig zu, wo die Abfrage für 800px oder mehr true ist.

Mittlerweile habe ich die body-tags ergänzt und den JavaScript-Code auch verändert. Aber das Ergebnis verändert sich nicht.

Code: 
if (window.matchMedia("(max-width: 800px)").matches) { … }

und

Code: 
if (window.matchMedia("only screen and (max-width: 800px)").matches) { … }

@SteelWheel
Was meinst Du mit DOM-ready? Kannst Du mir dazu einen Link oder ein Beispiel geben?

P.S.
Eigentlich soll die index.php ja auch nichts ausgeben. Ich will dort ja nur entscheiden welches template gewählt wird.

Also in "normaler" Ansicht möchte ich das Menü oben und zusätzlich möchte eine Navigationsleiste links haben. In der mobilen Ansicht möchte ich das Menü links haben und die Navigationsleiste komplett entfernen.

Na sollte meine Idee nicht klappen, muss ich wohl wieder zurück zu zwei CSS-Dateien. Ich sehe den Vorteil von 2 Templates eben darin, dass ich dann alle Bilder in der mobilen Ansicht weg lassen kann.
 
Zuletzt bearbeitet:
Niemand1982 schrieb:
Ursprünglich hatte ich es mit unterschiedlichen CSS-Dateien gelöst gehabt. Doch nun möchte ich die Mobileseite gänzlich anders aufgeteilt haben, ... .
Zum Vergrößern anklicken....
das müsste schon funktionieren mit Mediaqueries.
Du musst nur die beiden in eine eigene M-Query einpacken und so die Cascade unterbrechen

das kannst du alles über ein css file machen.

HTML: 
<!DOCTYPE html>

<html lang="de">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>...</title>
<style>
/* *****************  DEFAULT**********************************
 Hier her  kommt alles  das in allen Geräten gelten soll */

body{ margin:0 ;padding:0; text-align:center;}  /* usw. 

************************************************************* */

/* ***************** DESCTOP  **********************************
Hier her alles ab einer Mindest-Auflösung zb ab tablet  756px  wenn du eine Änderung auch im Browser bei resize
haben willst heißt der Query zb (min-width:756px) wenn nur Geräte reagieren sollen dann (min-device-width:756px)    */

@media  (min-width:756px)
{
body{background-color:#357;}
}
/* ************************************************************************************************ */
/* ********************************       Mobile       ****************************************************
Hier her alles unter 756px */
@media (max-width:755px)
{
body{background-color:#900;}
}
</style>
		
	</head>
<body>

</body></html>

Du musst auf Spielerrein nicht verzichten informiere dich über CSS Transitions und CSS Animations .
 
Zuletzt bearbeitet von einem Moderator:
Guten Morgen,

@Andreax
Danke für deinen Tipp. So wie Du es vorgeschlagen hast, hatte ich es ja im Grunde vorher gehabt. Nur anstatt eine CSS-Datei hatte ich es in 2 aufgeteilt, damit der User nicht soviel Datenvolumen verliert und nur das wirklich benötigte laden muss. Dabei stört es mich ja, dass ich Bilder im Text nicht weglassen kann. Wenn ich nur per CSS zwischen Mobil und Desktop differenziere, dann kann ich nur ein Template verwenden. Hintergrundbilder oder ähnliches kann ich zwar weglassen, jedoch nicht das ganze "überflüssige" Zeugs, welches ich nicht in der Mobilenansicht haben will.

Das ich auf die "Spielereien" nicht verzichten muss ist mir irgendwie schon bewusst gewesen. Jedoch ich verzichte bewusst auf die Spielereien. Animationen und solche Dinge empfinde ich als User schon endlos nervig. Solche Sachen klauen mir nur Datenvolumen, denn ich bin ausschließlich mobil im Internet unterwegs. Dann die ganzen Cookies, irgendwelche Sessions und all die nervigen Informationsabfragen machen nicht nur mein Surfen ohne Highspeed zu einer Qual. Also weshalb sollte ich dann die Selben nervigen "Maßnahmen" anwenden?! Genau aus diesem Grund will ich eben auch keine Bilder in der Mobilenversion.
 
Bilder im text kannst du eine Klasse vergeben die du im default css mit display:none ausblendest und nur im desctop einblendest.
Ja und Transitions und Animations sind nur ein paar css Befehle alles andere ist schon vor Ort im browser.
Zu Dom-ready es gibt für JQuery eine Funktion die heißt ready und wird sobald das Dom und alle Variablen geladen ist auseführt.
wenn dir aber das Datenvolumen wichtig ist solltest du darauf verzichten und ist auch heutzutage nicht mehr notwendig.
Als Alternative gibt es in JS einen EventListener DOMContentLoaded
oder ganz einfach die script Tags ganz ans ende der Seite for dem schließenden Body Tag einfügen.
 
Zuletzt bearbeitet von einem Moderator:
Dann vielleicht noch mit anderen Worten: Dein Firefox wird autom. oder per Plugin Weiterleitungen per JavaScript deaktiviert haben - darum passiert da nichts. Du kannst ja gern mal ein console.log("Desktop"); bzw. console.log("Mobile"); zu Deinen jeweiligen Redirects packen und einen Blick nach Ausführung in die Konsole des FF werfen. Dann dürfte er zumindest die Konsole befüllen und Du hast einen Nachweis (weil Du im Body-Tag ja nichts schreiben willst, falls eine Weiterleitung in einem individuellen Browser mal nicht funktioniert; sprich: Alternative anbieten).

Kurzum: Du wirst Leute haben, bei denen die Weiterleitung so funktionieren dürfte (ohne match(); allerdings mit window.location.href!). Aber Du wirst auch immer welche dabei haben, die das blockieren - bewusst wie unbewusst. Und hier musst Du nur eine Alternative anbieten – statt Automatik bzw. Nichtstun.

Zum CSS: Bei einem "mobile first" Ansatz ist Dein Media-Query für Mobilgeräte gefälligst das erste, was im CSS steht (mittels Regel); Dinge für "above the fold" u. U. als CSS im head-Tag (das liegt an Deiner Seite und was die zeigt, macht usw.). Wenn Du einen Pre-Compressor einsetzt (SASS, LESS) oder mit Grunt vielleicht noch Dateien kombinieren willst, lässt sich das hierarchisch in Deinem Projekt wartungsfreundlich ablegen - hier erfolgt die Zusammenlegung erst auf Befehl. Rein physisch (raw) ist also nicht alles in einer Datei, sondern gesplittet ... wie Du es u. U. magst. Heißt: Die Übersicht bliebe gewahrt.

Wenn Du weitere Hilfe brauchst und Skype hast, schreib mir eine PN ... das geht u. U. schneller als hier mit Text (bin heute den ganzen Tag hier im Office und habe nichts zu tun!). :D

Viel Erfolg.
 
Zuletzt bearbeitet:
Guten Morgen

@SteelWheel
Nun nehme ich es persönlich! Was soll die ganze Zeit der Quatsch, dass mein Firefox nix anzeigt? Geht es dir nur um möglichst viele Beiträge oder hast Du generell was gegen aufmerksames Lesen?
Im Titel steht schon das Firefox als einziger klappt, ich habe es Dir schon 2 mal geschrieben. Also hier zum 4. Mal! Nur Firefox erkennt das Javaschript.

@allen Anderen
Ich freue mich echt über die rege Teilnahme. Das beantwortet aber nicht meine Frage. Das ich es CSS lösen kann ist mir schon bewusst, schließlich habe ich ja schon darauf hingewiesen gehabt, dass ich es ursprünglich mit CSS hatte.
Mich interessiert schlicht, wie es im Titel auch steht, warum ausschließlich Firefox das Javascript richtig interpretiert. Erkennen und ausführen tuen alle getesteten Browser das Script. Aber Chrome und der vorinstallierte Browser von Android (beides Googleprodukte) sind der Ansicht, dass mein Smartphone ein 800 pixel breites Display hätte. Wenn die Abfrage des Displays jedoch nicht mittels JavaScript erfolgt, dann klappt es eben tadellos.

Ich suche nicht nach einer Alternative, ich suche nach einer Antwort.
 
Guten Morgen. Grundsätzlich ist mir sterbensegal, was Du meinst mir vor den Kopf werfen zu müssen. Interessant ist eigentlich nur die nun tatsächliche Frage ...

Niemand1982 schrieb:
Mich interessiert schlicht, wie es im Titel auch steht, warum ausschließlich Firefox das Javascript richtig interpretiert. Erkennen und ausführen tuen alle getesteten Browser das Script. Aber Chrome und der vorinstallierte Browser von Android (beides Googleprodukte) sind der Ansicht, dass mein Smartphone ein 800 pixel breites Display hätte. Wenn die Abfrage des Displays jedoch nicht mittels JavaScript erfolgt, dann klappt es eben tadellos.
Zum Vergrößern anklicken....

Sind Deine Tests auf verschiedenen Geräten? Funktioniert es im FF, da dieser auf dem PC installiert ist? Die Weiterleitung greift direkt, wenn Du das Fenster skalierst? Smartphone weigert sich und nimmt immer die "größere" - egal welcher Browser?

Falls ja: Dann hörst Du jetzt bitte auf Dich anzufeinden (oder es persönlich zu nehmen). Stattdessen installierst Du Dir die Lib mobiledetect. Anhand des dort befindlichen Beispiels kannst Du exzellent bereits zwischen verschiedensten Geräteklassen unterscheiden (Erkennung übernimmt die Lib). Eine Antwort platzierst Du Dir im body-Tag als bspw. data-* oder schreibst es direkt als Variable in eine JavaScript-Variable (in Deinem Fall). Mit dieser Variable kannst Du dann eine JavaScript-Unterteilung entsprechend vornehmen - hierzu wirst Du Deine if/else-Bedingung natürlich erweitern müssen - bspw. je Geräteklasse (isTablet, isMobile). Womöglich wäre es daher sinnig (aufgrund Deiner if/else) lediglich zwischen "Desktop" und "Mobilgerät" zu unterscheiden - "isTablet || isMobile" schickst Du dann auf die kleine Auflösung - alle anderen ("isComputer") auf die große.

Die Antwort, die Du suchst, liegt an der Auflösung der Displays eines Smartphones. Mein Smartphone verfügt über einen 5,1" Display - das entspricht 1440 × 2560 px. Der würde genauso immer nur die große Anzeige verlangen.

Heißt: Auf Pixelbasis ist keine gute Idee - denke auch bitte weiter, sollte (!) Dein Tun irgendwann "public" sein (Du wärst überrascht, wieviele Auflösungen es da draußen auf diesen Kackgeräten gibt).

Falls nein: EOF#

Und damit bin ich hier weg, viel Erfolg.
 
Du fragst in keinem der Scripte das Display Ab.InnerWidth bezieht sich nur auf die DoKumentweite und und die Richtet sich nach der Auflösung und die ist wie Steelweel schon anmerkte nicht identisch mit der Screen weite.
Ich hatte letztens schon in ein paar Threats darauf hingewiesen dass man um die größtmögliche Weite eines Displays das Screenobject verwenden sollte,
screen.availWidth richtet sich nur nach der Display weite genau das was du brauchst.
Und der FF vermute ich mal nimmt den unterschied zwischen screen und window nicht so genau.
 
Danke für die Antworten.

Aufgrund dem Screen-Objekt bin ich ja zum innerWidth gekommen.

Hier https://wiki.selfhtml.org/wiki/JavaScript/Screen, heißt es eben dass das Screen-Objekt unzuverlässig ist und deshalb window.innerWidth besser sei. Eben so ist dort geschrieben, dass es um die Breite des verfügbaren Bereichs der Darstellung im Browser geht. Zitat: "Das Auslesen der Größe desjenigen Bereiches im Browserfenster, in dem letztlich die Web-Seite letztendlich dargestellt wird, ist z.B. über window.innerWidth und document.body.offsetWidth möglich."

Aber okay, ich probiere es heute Abend dann mit dem Screen-Objekt.

- - - Aktualisiert - - -

Danke für die Hilfe.

Mit dem Screen-Objekt klappt es nun auch bei Chrome und Co.

Finde ich dennoch merkwürdig, dass es entgegen der o.g. Quelle nicht mit window klappte.

Von mir aus kann der Thread nun geschlossen werden. Meine Frage wurde ja beantwortet und mir wurde zusätzlich viel Hilfe gegeben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben