Question

我的网站midwestwindowbroker.com在我的手机（iPhone 6）上遇到问题，因为它默认为较小的屏幕尺寸。当我在具有小屏幕尺寸的桌面上进行测试时，它可以完美地调整，但是，在实际的移动设备上，它正在最大限度地减少应用程序。我一直在调整媒体查询一段时间，试图找到调整问题的部分，但却找不到它。

我很确定响应式菜单（我没有构建）会把它丢掉，但是当我读完CSS时，我无法看到它的位置。

菜单CSS：

＆＃13;

.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;}}

＆＃13;

Page CSS：

＆＃13;

create-app

＆＃13;

Answer 1

您的徽标图片在移动视图中显示为width:506;，将其更改为width:100%;即可。

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

Answer 2

我在the iOS Developer Library找到了解决方法。在我的html下，

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

我需要添加：

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

移动网站默认使用媒体查询缩小屏幕尺寸＆amp; java脚本

2 个答案: