移动网站默认使用媒体查询和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">