IOS Safari nicht ganze Webseite zeigt

Question

Kein Problem mehr ein Update gefunden: position:absolute

Ich habe ein Problem mit meiner Website auf allen iOS-Geräten mit Safari

using iphone 6 using safari & chrome developer tool on mac it works perfectly

css :

#logoleft,#top h3,body,html{float:left}#second,body,html{margin:0;overflow-x:hidden;overflow-y: scroll}#catalogus,#prodcel{align-items:stretch}#catalogus-show td img,#front,#top,body,html{width:100%}#front,#info table h3,#location h3,#social,.banner h1,.banner h2,.banner h3,.leftright,.social{text-align:center}body,html{height:100%;padding:0;color:#757575;background:#ebfaeb;overflow-y:visible;font-size:Large;z-index:1;font-family:"Comic Sans MS";outline:0}#back,#catalogus-show td.hoverpro:hover,.banner h1,.banner h2,.banner h3{background:#e9b869}#top,#top a,.banner h1,.banner h2,.banner h3{color:#ebfaeb}#logoleft,#top p{padding:8px 16px}#front{z-index:0;position:relative;overflow:hidden}#top{z-index:1;position:absolute;top:0;border-bottom:1pt solid #757575}#top p{float:right;vertical-align:top}#top a{text-decoration:none}#front img.move{width:100%;transform:scale(1.2);transition:3s}#front:hover img.move{transform:scale(1);-webkit-filter:grayscale(50%);filter:grayscale(50%)}#second{padding:0}.banner{margin:0;vertical-align:middle}.banner h1{margin:0;padding:32px 0 0;font-size:225%}.banner h2{margin:0;padding:0 0 32px;font-size:200%;font-style:italic}.banner h3{padding:32px;margin:0}#catalogus{padding:32px;overflow:scroll;-webkit-overflow-scrolling: touch;z-index: -1}#catalogus-show{margin:16px auto;border-spacing:8px}#catalogus-show td{border:1pt solid #e9b869;border-radius:8px;padding:16px}#catalogus-show td.hoverpro{transition:.25s}#catalog{width:60%;margin:0 auto}#catalog td{max-width:50%}#bestel{padding:32px 10%;width:80%;display:flex}#bestelform{float:left;background:#ebfaeb}#bestelform table{width:100%;vertical-align:top}#prodcel{width:40%;vertical-align:top}#winkelwagen div,#winkelwagen p{float:left;vertical-align:middle}#bestelform table tr td input,#fastaddnumber{width:97%;margin:0 auto;height:40px}#bestelform table tr td input,#bestelform table tr td textarea,#fastaddnumber,button,select{color:#757575;font-size:18px;font-weight:lighter;font-family:"Comic Sans MS";border:none;border-bottom:2px solid #e9b869;border-radius:10px;background:#ebfaeb;float:left}#bestelform table tr td textarea{border:2px solid #e9b869;width:98%;margin:0 1%;height:128px}#bestelform table tr td input[type=submit],#prodcel select{color:#ebfaeb;background:#e9b869;height:40px;border:none}#prodcel select{width:60%;float:left}#prodcel button{color:#ebfaeb;width:24%;float:left;height:40px;margin-left:1%;background:#e9b869}#fastaddnumber,#prodcel input[type=number]{width:13%;float:left;height:40px;margin-left:1%}#winkelwagen button{width:15%;float:left;height:40px;margin:auto 1% auto 0;font-size:32px;background:#e9b869}#winkelwagen p{width:68%;margin:0;padding:auto 0}#winkelwagen div{width:100%;padding:2px 0}#showprod,.ontp{padding:8px}#bestelform table tr td input.fif{width:45%;margin:0 2%;float:left}#bestelform table tr td label input{float:left;display:none}#bestelform table tr td label span{height:32px;width:32px;border:2px solid #e9b869;border-radius:8px;margin-left:1%;display:inline-block;position:relative;float:left}#bestelform table tr td [type=checkbox]:checked+span:before{content:'\2714';font-size:24px;position:absolute;left:8}#bestelform table tr td p{margin:0;float:left}#showprod{align-items:stretch;width:40%;float:left}#fiche{border:2px solid #e9b869;border-radius:16px}.imganibox{z-index:0;overflow:hidden;width:100%}.leftright{position:relative;max-width:100%;background:#e9b869;padding:32px 0;border-bottom:1pt solid #757575}.leftright table{margin:auto;width:100%;padding:0;color:#ebfaeb;position:absolute;top:0;border-spacing:32px}#a,#b,#c,#d{background:rgba(117,117,117,.75);opacity:.7%;padding:1%;margin:auto}.leftright table tr td{width:40%;vertical-align:top}#a{border-radius:12px 12px 0}#b{border-radius:12px 12px 12px 0}#c{border-radius:12px 0 12px 12px}#d{border-radius:0 12px 12px}.leftright h4,p.datum{float:left;margin:0 0 8px}.leftright h4{width:60%}p.datum{width:40%;font-weight:lighter}#kaart,#location{width:100%;margin:0}#location{float:left}#location h3{color:#ebfaeb;padding:32px;margin:0;background:#e9b869}#info{width:100%;padding:32px 0}#info table{width:75%;margin:8px auto}#info table td{width:25%;vertical-align:top}#contact table,#openingsuren table{margin:auto;width:1%;white-space:nowrap}#info table td table td:first-child{width:1%;white-space:nowrap}.social{width:100%;height:60px;margin:0 auto;vertical-align:middle}.social a,.social div{margin:auto}#north-wind,#north-wind a,#north-wind p{color:#757575;background:#e9b869;margin:0;padding:16px;font-size:75%;text-align:center} 

und zusätzliche CSS für mobile Geräte

body,html{font-size:x-large}#front{height:50%}#front img.move{min-height:300px}#catalogus{height:256px;width: 90%;margin: 0px auto;}#catalogus-show{width:100%;max-width:600px}#catalogus-show tr td{width:50%;word-break: break-all}#bestelform,#bestelform table tr td{width:100%}.leftright img,.leftright table tr td{height:400px} 

Sie die Website besuchen können www.juul-foods.be

Answer 1

Versuchen Sie, diese Meta-Tag hinzu: <meta name="viewport" content="width=device-width, initial-scale=1">