使用媒體查詢和Java腳本將移動網站默認設置為較小的屏幕尺寸

Question

我的網站midwestwindowbroker.com在我的手機（iPhone 6）上出現問題，默認情況下屏幕尺寸較小。 當我在屏幕較小的台式機上進行測試時，它的調整效果非常好，但是，在實際的移動設備上，它卻將其最小化了。 我已經調整媒體查詢一段時間了，試圖找到可以解決問題的片段，但沒有找到。

我非常確定響應式菜單（我沒有構建）正在將其丟棄，但是當我閱讀CSS時，我看不到它在哪里。

菜單CSS：

 #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {margin: 0; padding: 0; position: relative; z-index:50;} #cssmenu:after, #cssmenu ul:after {content: ''; display: block; clear: both;} #cssmenu a {color: #333333; display: inline-block; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 12px; min-width: 35px; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 #eeeeee;} #cssmenu ul {list-style: none;} #cssmenu > ul > li {float: left;} #cssmenu > ul > li.active > a { background: #d9d9d9 url(images/grad_light.png) repeat-x left bottom; background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; -moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; -webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; filter: none;} #cssmenu > ul > li.active a:hover { background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); filter: none;} #cssmenu > ul > li a { box-shadow: inset 0 0 0 1px #ffffff; -moz-box-shadow: inset 0 0 0 1px #ffffff; -webkit-box-shadow: inset 0 0 0 1px #ffffff; background: #bfbfbf url(images/grad_light.png) repeat-x left top; background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed)); background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); border-bottom: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2; line-height: 34px; padding: 0 35px; filter: none;} #cssmenu > ul > li a:hover { background: #ffffff url(images/grad_light.png) repeat-x left bottom; background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7)); background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); filter: none;} #cssmenu > ul > li:first-child a { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-left: 1px solid #d2d2d2;} #cssmenu > ul > li:last-child a { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0;} #cssmenu .has-sub:hover ul {display: block;} #cssmenu .has-sub ul {display: none; position: absolute; top: 36px; left: -1px; min-width: 100%; text-align: center; *width: 100%;} #cssmenu .has-sub ul li {text-align: center;} #cssmenu .has-sub ul li a {border-top: 0 none; border-left: 1px solid #d2d2d2; display: block; font-size: 12px; line-height: 120%; padding: 9px 5px; text-align: center;} 

頁面CSS：

 .content ul, .content ol {padding: 0 15px 15px 40px; } ul.nav {list-style: none; margin-bottom: 15px;} ul.nav li { } ul.nav a, ul.nav a:visited { padding: 5px 5px 5px 15px; display: block; width: 160px; text-decoration: none;} ul.nav a:hover, ul.nav a:active, ul.nav a:focus {background: #ccc; color: #CCC;} .image {margin: 0px 10px 0px 0px;} /* ~~ miscellaneous float/clear classes ~~ */ .ia-container {width: 730px; margin: 0 0 0px -20px; overflow: hidden;} .ia-container figure {position: absolute; top: 0; left: 50px; width: 380px; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); transition: all 0.3s ease-in-out;} .ia-container > figure {position: relative; left: 0 !important;} .ia-container img {display: block; width: 100%;} .ia-container input {position: absolute; top: 0; left: 0; width: 50px; height: 100%; cursor: pointer; border: 0; padding: 0; opacity: 0; z-index: 100; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .ia-container input:checked{width: 5px; left: auto; right: 0px;} .ia-container input:checked ~ figure {left: 330px; transition: all 0.7s ease-in-out;} .ia-container figcaption {width: 100%; height: 100%; background: none; position: absolute; top: 0px; transition: all 0.2s linear;} .ia-container figcaption span {position: absolute; top: 30%; margin-top: -30px; right: 20px; left: 20px; overflow: hidden; text-align: center; line-height: 20px; font-size: 18px; opacity: 0; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; padding: 20px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);} .ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption{background: rgba(87, 73, 81, 0);} .ia-container input:checked + figcaption span {transition: all 0.4s ease-in-out 0.5s; opacity: 1; top: 50%;} ia-container #ia-selector-last:checked + figcaption span {transition-delay: 0.3s;} .ia-container input:hover + figcaption {background: rgba(87, 73, 81, 0.03);} .ia-container input:checked ~ figure input{z-index: 1;} @media screen and (max-width: 720px) { .ia-container {width: 540px;} .ia-container figure {left: 40px; width: 260px;} .ia-container input {width: 40px;} .ia-container input:checked ~ figure {left: 260px;} .ia-container figcaption span {font-size: 16px;}} @media screen and (max-width: 374px) { .ia-container {width: 320px;} .ia-container figure {left: 20px; width: 180px;} .ia-container input {width: 20px;} .ia-container input:checked ~ figure {left: 180px;} .ia-container figcaption span {font-size: 12px; letter-spacing: 2px; padding: 10px; margin-top: -20px;} .mybgcarousel {display:none;}} 

Answer 1

您的徽標圖片的width:506; 在移動視圖中將其更改為width:100%; 它會工作。

a img {
    width: 100%; // added this
    border: none;
}

Answer 2

我在iOS開發人員庫中找到了修復程序。 在我的html下，

<meta name="viewport" content="initial-scale=1.0">

我需要添加：

<meta name="viewport" content="width=590">