Startseite wird auf mobilen Geräten stark verkleinert angezeigt

Diskutiere Startseite wird auf mobilen Geräten stark verkleinert angezeigt im HTML Forum im Bereich Programmierung; Hallo, ich könnte mal eure Hilfe brauchen. Diese Homepage ist von mir. Läuft soweit gut, doch jetzt ist mir aufgefallen, das die Startseite auf...
Neues Thema erstellen Antworten
  • Startseite wird auf mobilen Geräten stark verkleinert angezeigt Beitrag #1
M
meinereiner7
New member
Beiträge
1
Punkte Reaktionen
0
Hallo,

ich könnte mal eure Hilfe brauchen.
Diese Homepage ist von mir. Läuft soweit gut, doch jetzt ist mir aufgefallen, das die Startseite auf allen mobilen Geräten nur stark verkleinert startet und dann erst nach Doppelklick in den Vollbildschirm wechselt.
Ich komme momentan nicht auf den Fehler, vielleicht kann mir irgendwer weiterhelfen. Hier der Code:

Index-Seite
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Schreinerei Horst Guggenberger</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Horst Guggenberger">
<meta name="publisher" content="Horst Guggenberger">
<meta name="copyright" content="Horst Guggenberger">
<meta name="description" content="Herzlich Willkommen bei der Schreinerei Horst Guggenberger. Schreinerei Horst Guggenberger Birket 8 Tel: 08774/1565 Fax: 08774/969820 e-mail: [email protected].">
<meta name="keywords" content="Schreinerei, Horst, Guggenberger, Birket, Tischler, Holz, Schreiner, Möbel, nach, Maß, ">
<meta name="page-topic" content="Bauen Wohnen">
<meta http-equiv="content-language" content="de">


<meta name="viewport" content="width=1024" />


<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/animation.css" type="text/css">





<link rel="stylesheet" type="text/css" href="cookieconsent/cookieconsent.min.css" />
    <script src="cookieconsent/cookieconsent.min.js"></script>
    <script>
        window.addEventListener("load", function(){
            window.cookieconsent.initialise({
                "palette": {
                    "popup": {
                        "background": "#edeff5",
                        "text": "#838391"
                    },
                    "button": {
                        "background": "#4b81e8"
                    }
                },
                "theme": "edgeless",
                "content": {
                    "message": "Wir verwenden Cookies auf der Website, um Ihren Besuch effizienter zu machen und Ihnen Benutzerfreundlichkeit bieten zu können.",
                    "dismiss": "OK",
                    "link": "Informationen",
                    "href": "datenschutz.html"
                }
            })});
    </script>









</head>
<body>


<div align="center">

<div id="logo">
<div id="logoname">

<h1> Schreinerei Horst Guggenberger</h1>


<!-- Ende-Name, oben Schreinerei Horst Guggenberger -->

</div>


<!-- Foto oben Schreinerei -->

</div>


<!-- Hauptrahmen -->

     <div id="rahmen">


<!-- Navigationsleiste oben -->

      <div id="navi">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="index.html">Home</a></td>
    <td><a href="ueberuns.html">Über uns</a></td>
    <td><a href="philosophie.html">Philosophie</a></td>
    <td><a href="moebel.html">Möbel und Einrichtungen</a></td>
    <td><a href="kontakt.html">Kontakt</a></td>
    <td><a href="impressum.html">Impressum & Datenschutzerklärung</a></td>



  </tr>
</table>
     </div>

<!-- Ende Navigationsleiste oben -->


<!-- Animation Logo Schreinerinnung -->

<div id="animat">


<a href="https://www.schreiner.de/meinschreiner/"><img src="images/logo.jpg" width="80" height="80" border="0" alt=""></a>
</div>




<!-- Beginn Inhalt -->
    <div id="inhalt">
<h1>Herzlich Willkommen<br>

bei der Schreinerei Horst Guggenberger</h1><br>
</div>
<br><br><br>





<!-- Ende Inhalt -->




<!-- Beginn Fußende -->



<div id="footer">


 Schreinerei Horst Guggenberger&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Birket 8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      
          Tel: 08774/1565&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          Fax: 08774/969820&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

e-mail:&nbsp;<a href="mailto:[email protected]">[email protected]</a>


</div>
<!-- Ende Fußende -->
<!-- Ende Hauptrahmen -->


</div>
</div>
</body>
</html>




style.css





CSS: 
img {max-width: 100%; height: auto;}





body       
{



font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
margin: 0
}

/* allgemeine Linkformatierung Textbereich und Fußende*/


a:link, a:active, a:visited
{
color: #333;
text-decoration: underline     
}
a:hover
{
text-decoration: none;
color: #999     
}

/* Rahmen für Grafiken allgemein */
img
{
border: 0
}

/* Formatierung Foto oben Schreinerei*/

#logo   
{

margin: 0;
background-image: url('../images/fotooben.jpg');
background-size: cover;
background-repeat: none;
background-position: center;

height: 55%;
}

/* Text im Bild oben Schreinerei Horst Guggenberger*/

#logoname   
{

margin: 0;
padding-top: 1em;
font-size: 2em;
font-weight: bold;
color: orange;
text-shadow: 3px 3px 0px black;
letter-spacing: 0.3em;



}
/* Navigation */
#navi
{
background-image: url('../images/navi_hover.gif');
background-repeat: repeat-x;
background-color: #ccc;
color: #333;

}

/* Navi Tabelle Formatierung Größe usw. Home, Über uns, Möbel und Einrichtungen */
#navi table
{
border-collapse: collapse;
table-layout: auto;
width: 80%;
line-height: 2.5em;
}
#navi td
{
text-align: center;
border: 1px solid #999;
}


/* Schriftart, Größe der Navigationstabelle */

#navi a
{
background-image: url('../images/navi.gif');
background-repeat: repeat-x;
color: #fff;
text-decoration: none;
font-size: 1em;
display: block;
}
#navi a:hover
{
background-image: url('../images/navi_hover.gif');
color: #000
}





/* Inhalt Hintergrund */
#inhalt   
{

border: 1px solid #000;
background-color: #fff;
background-image: url('../images/inhalt.gif');
background-repeat: repeat-x;
width: 70%;
text-align: center;
opacity: 1.0;
}

/* Überschriften und Absatz */
#inhalt h1
{         
font-size: 2em;
color: #666;
text-align: center;

}
#inhalt h2
{         
font-size: 1.5em;
text-align: center;

}



/* Hauptrahmen */
#rahmen     
{
background-image: url('../images/bg.gif');
background-repeat: repeat;
background-position: center;
background-attachment:fixed;

}

/* Footer */
#footer
{
background-color: grey;

line-height: 6.26em;
color: #333;
font-size: 1.2em;
  width: 100%;
position: fixed;
  bottom: 0px;



}



Und die Animation.css
#animat{
z-index:999;

 animation: logo linear 6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/

  -webkit-animation: logo linear 6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/

  -moz-animation: logo linear 6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/

  -o-animation: logo linear 6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/

  -ms-animation: logo linear 6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/

}

@keyframes logo{
  0% {
    transform:  translate(40%,50px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(-40%,50px)  rotate(360deg) ;
  }
}

@-moz-keyframes logo{
  0% {
    -moz-transform:  translate(40%,50px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(-40%,50px)  rotate(360deg) ;
  }
}

@-webkit-keyframes logo {
  0% {
    -webkit-transform:  translate(40%,50px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(-40%,50px)  rotate(360deg) ;
  }
}

@-o-keyframes logo {
  0% {
    -o-transform:  translate(40%,50px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(-40%,50px)  rotate(360deg) ;
  }
}

@-ms-keyframes logo {
  0% {
    -ms-transform:  translate(40%,50px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(-40%,50px)  rotate(360deg) ;
  }
}

Die Cockie CSS hat keinen Einfluss, da ich die erst heute eingebaut habe und es schon vorher nicht funktioniert hat.

Bin für jeden Tipp dankbar.

Vielen Dank im voraus für eure Mühen

Mfg
 
  • Startseite wird auf mobilen Geräten stark verkleinert angezeigt Beitrag #2
T
tk1234
Well-known member
Beiträge
103
Punkte Reaktionen
8
Die das was als viewport angegeben ist, ist falsch, siehe https://wiki.selfhtml.org/wiki/HTML/Elemente/meta#Viewport_einstellen.

Allerdings liegt bei der Seite noch einiges mehr im Argen:
 
Thema:

Startseite wird auf mobilen Geräten stark verkleinert angezeigt

Oben Unten