使用媒体查询和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; 
 
\t margin-bottom: 15px;} 
 
ul.nav li { } 
 
ul.nav a, ul.nav a:visited { 
 
\t padding: 5px 5px 5px 15px; 
 
\t display: block; 
 
\t width: 160px; 
 
\t text-decoration: none;} 
 
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {background: #ccc; 
 
\t color: #CCC;} 
 
.image {margin: 0px 10px 0px 0px;} 
 

 
/* ~~ miscellaneous float/clear classes ~~ */ 
 
.ia-container {width: 730px; 
 
\t margin: 0 0 0px -20px; 
 
\t 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;} 
 
\t .mybgcarousel {display:none;}}

Answer 1

我在the iOS Developer Library找到了一个修复程序。在我的下HTML，

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

我需要添加：

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

Answer 2

您的标志图像是具有width:506;在移动视图中将其更改为width:100%;它将起作用。

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