Auf Thema antworten

Beitrag

[QUOTE="Knallkopf, post: 12834, member: 4334"]
Guten Tag,

Ich bin dabei mir eine eigene Website zu erstellen, um meinen 3D Drucker als Dienstleistung anbieten zu können. Dafür greife ich auf ein <iframe> Tool von Treatstock zurück.
Jetzt habe ich jedoch bei IOS Geräten wie Iphones und Macs das Problem, dass dieses Fenster nicht angezeigt wird. Es scheint auch kein Problem von Safari zu sein, da auch anderen Browser (z.B. Brave) auf IOS das selbe Problem haben.
Unter Windows funktioniert die Seite jedoch Einwandfrei.

Dies wäre die Seite von mir:
[URL]https://www.cjack-3dprint.de/[/URL]

Der HTML code dieser Seite ist folgender:
[CODE=html]<!DOCTYPE html>

<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>C-Jack 3D-Print</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Bestellen Sie hier bei uns Ihren 3D-Druck und lassen Sie ihn sich bequem nach Hause liefern. Einfach und unkompliziert das 3D Model hochladen und einen sofortigen Preisvorschlag erhalten.">
        <meta name="keywords" content="3d Druck, 3d print, drucken, druck, bestellen, kaufen, berlin, 3ddruck, 3d-druck, c-jack, anfänger, easy, versand, zuschicken lassen">
        <meta name="author" content="C-Jack">
        <link rel="stylesheet" href="style.css">

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-228107513-1">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'UA-228107513-1');
</script>

</head>
    <body>

<header>
            <div class="logo"><a href="http://www.cjack-3dprint.de"><img src="./logo.png" alt="logo"></a></div>
            <nav>
                <ul class="nav_links">
                    <li><a href="./How_to/index.html">How-to</a></li>
                    <li><a href="./Über_uns/index.html">Über uns</a></li>
                    <li><a href="./Refer_a_Friend/index.html">Refer a Friend</a></li>
                </ul>
             </nav>
             <a class="cta" href="./Kontakt/index.html"><button>Kontakt</button></a>
        </header>

<div id="footer">
            Copyright 2022 - Jeremy Chuck Jacob <br> <br>
            <a href="./Kontakt/index.html">Impressum</a>
        </div>

Der Css Code ist folgender:

[CODE=css]body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0px;
    background-color: rgb(1, 0, 48);
    color: white;
}

/* Dieser css Abschnitt ist für die Navbar */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

li, a, button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.logo {
    cursor: pointer;
}

.logo img {
    width: 230px;
    max-width: 100%;
}

.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
   transition: all 0.3s ease 0s;

}

.nav_links li a:hover {
    color: #0088a9;

}

button {
     padding: 9px 25px;
     background-color: rgba(0,123,169,1);
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition: all 0.3s ease 0s;
 }

button:hover {
    background-color: rgba(0,123,169,0.8);
 }

/* ab hier endet der Abschnitt für die Navbar */

#top {
    text-align: center;
}

#logo-name {
    font-size: 32px;
    font-weight: bold;
    margin: 8px;
}

#navigation a {
    color: rgb(219, 219, 219);
    padding: 8px;
}

#navigation a:hover {
    color: hsl(197, 100%, 22%);
}

#image img {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
}

#main {
    max-width: 1000px;
    margin: auto;
    padding: 16px;
}

#main a {
    color: gray;
}

#main a:hover {
    color: hsl(197, 100%, 22%);
}

#footer {
    text-align: center;
    color: gray;
    padding: 16px;
}

#footer a {
    color: gray;
    text-decoration: none;
}

section {
    margin-bottom: 64px;
}

#header {
    position: absolute;
    margin-top: 16px;
    background-color: rgb(1, 0, 48);
}

.ts-embed-printservice {
    width: 100%;
    height: 1530px;
}
@media (min-width:480px) {
    .ts-embed-printservice {
    width: 100%;
        height: 1000px;
    }
}
@media (min-width:550px) {
    .ts-embed-printservice {
    width: 100%;
        height: 670px;
    }
}[/CODE]

Irgendwelche Ideen? :)
[/QUOTE]

Authentifizierung