Apple-Test

[stobi_de]

Ich habe ja immer noch kein IPhone oder IPad
Falls jemand hier sowas hat, ober auch einen Mac, könnte er oder sie mal ein wenig durchklicken?!
https://www.afripix.de/pfrommer-bau/index.php
User: Dominik
PW: Pfrommer2022

Ein ständig meckernder Bekannter sagte mir, dass die Seite auf einem Mac gar nicht funktioniert.
Allerdings schaltet er immer JavaScript aus und nutzt Safari in einer 10 Jahre alten Version.
Nur missachten will ich seine Meldungen nicht!

Seiner Meinung nach ist die Seite auch "so richtig Kacke"

[Tommy Herrmann]

Moin Frank,

also ich finde diese Seite großartig (glaube das hatte ich schon mal an anderer Stelle geschrieben)

Ist Dein Freund vielleicht selbst Webdesigner und ist jetzt neidisch

JavaScript darf man natürlich eigentlich nie ausschalten, fast alles funktioniert doch über JavaScript

Ich habe auch ein Samsung und kein iPhone - wenn gucke ich immer mit dem iPhone meiner Tochter, die ist aber gerade mit ihrem Freund nach Miami-Beach in ihr Appartement geflogen.

Vielleicht kommt später aber noch jemand (mein Airbrush Künstler) her, der mein altes Studio gemietet hat, mit iPhone, dann könnte ich mal gucken. Er hat auch ein iPad und einen Mac-Desktop da rum stehen.

Was soll denn da ganz speziell nicht am Mac funktionieren - weißt Du das? Benötigst Du von bestimmten Stellen einen Screenshot?

Off Topic:

Der Support von Mobirise hat mich gestern noch via E-Mail angeschrieben und sich für meine Hilfe bezüglich der BETA-Tests bedankt - aber auch geschrieben, im Moment bitte alles direkt via E-Mail zu melden, da der Support eine Weile nicht im Mobirise-Forum tätig sein wird. Wahrscheinlich Weihnachtszeit - keine Ahnung.

[hansjuerg]

Hallo Frank,

ich habe deine Seite auf einem iPhone 8 getestet. Da funktioniert alles perfekt.

Über das Kontaktformular habe ich eine Testmeldung erfasst. Auch das funktioniert ohne Probleme. Im Text habe ich zwar geschrieben "getestet mit iPhone 14", das ist falsch. Getestet habe ich mit dem iPhone 8. Das 14 habe ich erst bestellt.

Ich scliesse mich Tommys Meinung an und tippe auch auf Neid!

[stobi_de]

Vielen Dank Euch beiden.
Meiner Meinung nach ist die Seite auch gut gelungen.

Support hat sich bedankt?
Sowas finde ich doch richtig gut!!!

[Tommy Herrmann]

Ja also, leider hat Dein Bekannter wohl Recht

> Am Mac Rechner (aus dem Jahr 2012) sieht man alles wie am Windows - aber - das Hamburger-Menü ist nicht klickbar.

> Am IPhone 11 fehlt der gesamte Header-Block mit dem Foto vom Haus. Danach taucht dann beim Scrollen als erstes der Block mit der Schrift auf. Siehe Screenshot unten. Wenn man den Bildschirm nachlädt, also nach unten zieht, sieht man, dass das Foto vom Haus dahinter liegt - es hat also eventuell mit dem "z-index" etwas zu tun.

Die Social-Media-Symbole am linken Rand erscheinen weder am Mac noch am IPhone.

Das Hamburger-Menü ist am IPhone 11 jedoch funktionsfähig.

Weitere Tests kann ich heute wahrscheinlich nicht machen, da der Freund von mir jetzt für den Rest des Tages unterwegs bei Kunden ist.


P.S.:

jetzt (8:20 Uhr) ist der Header-Block aber auch an meinem Windows weg (heute morgen war noch alles OK) - Hamburger geht aber.

[stobi_de]

Danke für den test.
Die Media-Symbole erscheinen auf keinem Handy.
Sind angeblich störend - nun ja.
Oh, Titelbild ist weg....villa-head-tag-1.jpg ist nicht mehr im Projekt. Na sowas....

[Tommy Herrmann]

Ich weiß ja nicht, ob das Titelbild nun schon weg war, als ich am IPhone geguckt hatte.

Ich kann das jetzt auch nicht testen, da mein Bekannter jetzt weg ist.

Auf jeden Fall funktionierte das Hamburger Menü am Mac nicht.

[stobi_de]

Ich habe den Z-Index vom Hamburger auf 5 gesetzt.
Das Bild war gewiss schon eben weg, denn in Opera ging es auch nicht.

Gleich mal im Mobi-Forum vorstellen. Da gibt es ja einige mit Mac.

[Tommy Herrmann]

Frank,

ich hatte gerade nochmals geguckt - am Mac Rechner ist jetzt alles OK - am IPhone 11 fehlt immer noch oben das Haus, bzw. wird von einer weißen Fläche überdeckt.

Die Navi geht an beiden jetzt.

[stobi_de]

Ich habe gerade ins Javascript geschaut und gesehen, dass dort ein Code von vor 3 Tagen steht.
Was ist denn da los?

Ich baue jetzt nochmal haargenau den Code von Dir ein....

[Tommy Herrmann]

ach so - das sind Wechselbilder - das habe ich noch gar nicht gewusst

Mit Deinem JavaScript kann ich nix anfangen, da müsste wohl Werner mal gucken.

[stobi_de]

Tagsüber ein Haus mit Tageslicht, abends das gleiche Haus mit Abendbeleuchtung.
Eigentlich eine überflüssige Sache, wird kaum einer bemerken.

Ich habe jetzt den Code von Dir drin!

[Tommy Herrmann]

Der mit dem IPhone ist leider erst morgen wieder hier, kann ich im Moment nicht gucken ...

[Tommy Herrmann]

Dein Skript sieht so aus (so ist das nicht der Code von meiner Seite):

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
  let heute = new Date();
  let stunde = heute.getHours();
  let bild = `assets/images/villa-head-abend-1.jpg`;
  if (stunde >= 22 && stunde <= 3) bild = `assets/images/villa-head-abend-1.jpg`;
  if (stunde >= 4 && stunde <= 17) bild = `assets/images/villa-head-tag-1.jpg`;
  if (stunde >= 10 && stunde <= 17) bild = `assets/images/villa-head-tag-1.jpg`;
  if (stunde >= 18 && stunde <= 21) bild = `assets/images/villa-head-abend-1.jpg`;
  document.getElementById("Header-Teil-1").style=`background-image: url(${bild})`;
  document.getElementById("Header-Teil-2").style=`background-image: url(${bild})`;
  document.getElementById("Header-Teil-3").style=`background-image: url(${bild})`;
</script>

Geht das denn mit 3 x unterschiedlicher ID und wozu, wenn ich doch nur eine ID benötige - ich bin sehr unerfahren mit JavaScript - und wieso das gleiche Bild zu unterschiedlichen Zeiten

Ich glaube fast, "getElementByID" 3x untereinander zu schreiben ist falscher Syntax und könnte mir denken, dass deswegen nix am IPhone angezeigt wird.

https://stackoverflow.com/questions/144 ... ltiple-ids

Ich würde Dein Skript eher so sehen - nur so wäre es dann ähnlich wie mein Skript

Code: Alles auswählen

<!-- Skript Wechselbilder -->
<script>
  let heute = new Date();
  let stunde = heute.getHours();
  let bild = `assets/images/villa-head-abend-1.jpg`;
  if (stunde >= 4 && stunde <= 17) bild = `assets/images/villa-head-tag-1.jpg`;
  if (stunde >= 18 && stunde <= 3) bild = `assets/images/villa-head-abend-1.jpg`;
  document.getElementById("bild").style = `background-image: url(${bild})`;
</script>

... und dann so aufrufen:

Code: Alles auswählen

<div id="bild"></div>

[Tommy Herrmann]

P.S.:

Insgesamt sieht das dann bei meinem Block (mit Beschriftung und Overlay) so aus:

https://www.mobirise-tutorials.com/Tuto ... ilder.html

Code: Alles auswählen

    <!-- Start HTML für Hintergrundbild -->
    <header>

    <!-- Dieses <div> erzeugt das transparente Overlay, das man in der CSS modifizieren kann -->
    <div class="overlay"></div>

    <!-- zeitgesteuerte Bilder von Werner-Zenk.de -->
    <div id="bild"></div>

    <!-- Dies ist der Inhalt im Header, der dann auch mit Mobirise modifiziert werden kann -->
    <div class="container h-100">
      <div class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white">
          <h1 class="display-2"><br><b>Hintergrund Bilder</b></h1>
            <p class="lead mb-0"><br><br>Nach Tageszeit wechselnde Bilder<br><br>Wechsel um 4:00 Uhr, 10:00 Uhr - 6 Bilder, 16:00 Uhr und 22:00 Uhr<br><br><a href="Wechselbilder.html#Tutorial" class="text-warning">Tutorial der Wechselbilder&nbsp;<span class="mobi-mbri mobi-mbri-down mbr-iconfont"></span></a><br><br><a href="Video-Background.html#Video-Textblock" class="text-warning"></a><a href="Video-Background.html#Video3" class="text-warning"></a><a href="Wechselbilder.html#Bilder" class="text-warning">Ansicht aller hier erscheinenden Bilder&nbsp;<span class="mobi-mbri mobi-mbri-down mbr-iconfont"></span></a><br><br><br><a href="https://www.mobirise-tutorials.com/BusinessM4/Fullscreen-Video.html" class="text-white" target="_blank"></a><a href="Wechselbilder.html#Google" class="text-white" target="_blank">Translate this page&nbsp;<span class="mdi-action-translate mbr-iconfont"></span></a></p>
         </div>
       </div>
    </div>
         
    </header>
    <!-- Ende HTML für Hintergrundbild -->

... hier noch meine, persönliche und zusätzliche CSS:

Code: Alles auswählen

background-repeat: no-repeat;
header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
header #bild {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
}
header .container {
  position: relative;
  z-index: 2;
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.1;
  z-index: 1;
}