Question

我使用媒体查询根据宽度调整网站元素的大小。我正在桌面上进行开发和测试，它可以完美地运行，但是一旦我在移动设备（iPhone 5）上启动并测试它，它就不会调整大小 - 它以全宽显示。

我一直在寻找对此的回应，而普遍的共识似乎是设置我的视口。但我已经这样做了 - 在我的标题中我有：

<meta name="viewport" content="width=device-width, initial-scale=1">

我可能有什么东西可能会超越这个吗？

我的媒体查询如下所示：

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ 
    #rlanguage {position: relative; right:0; border:red solid 0px;}
    #iX-nav {position: relative; right:0; border:red solid 01px;}
    #infoemail {display:none}
    #mainMenu {display:none}    
    #mobileMenu {display:inline}    
    #DeskTopOnly {display:none;}                            
    #MenuSpacing {width: 1px;}
    #iX-footer {width: 100%; height:auto}
    .GreenMenuLine {background:#000}                            
    .rootVoices TD.selected {padding: 0px;}
    .rootVoices TD.rootVoice {padding: 0px; width:10px}
}


@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #rlanguage {position: relative; float:right; border:orange solid 0px;}
    #iX-nav {position: relative; float:right; border:orange solid 0px;}
    #infoemail {display:none}
    #mainMenu {display:none}
    #mobileMenu {display:inline}
    #DeskTopOnly {display:none;}
    #MenuSpacing {width: 3px;}
    #iX-footer {width: 100%; height:auto}
    .GreenMenuLine {background:#000}                            
    .rootVoices TD.selected {padding: 0px;}
    .rootVoices TD.rootVoice {padding: 0px; width:0px}
}

@media (min-width:681px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #rlanguage {position: relative; float:right; border:yellow solid 0px;}
    #iX-nav {position: relative; float:right; border:yellow solid 0px;}
    #infoemail {display:none}
    #mainMenu {display:inline}
    #mobileMenu {display:none}
    #DeskTopOnly {display:none;}
    #MenuSpacing {width: 2px;}
    #iX-footer {width: 100%; height:auto}
    .GreenMenuLine {background:#000}
    .rootVoices TD.selected {padding: 1px;}
    .rootVoices TD.rootVoice {padding: 1px; width:0px}
}


 @media (min-width:791px) { /* tablet, landscape iPad, lo-res laptops and desktops */ 
    #rlanguage {position: relative; float:left; border:green solid 0px;}
    #iX-nav {position: relative; float:left; border:green solid 0px;}
    #infoemail {display:inline}
    #mainMenu {display:inline}
    #mobileMenu {display:none}
    #DeskTopOnly {display:none;}
    #MenuSpacing {width: 12px;}
    #iX-footer {width: 100%;  height:auto}
    .GreenMenuLine {background:#000}
    .rootVoices TD.selected {padding-right: 10px; padding-left:10px;}
    .rootVoices TD.rootVoice {padding-right: 10px; padding-left:10px; width:12px}
}


@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
    #rlanguage {position: relative; float:left; border:blue solid 0px;}
    #iX-nav {position: relative; float:left; border:blue solid 0px;}
    #infoemail {display:inline}
    #mainMenu {display:inline}
    #mobileMenu {display:none}
    #DeskTopOnly {display:inline;}
    #MenuSpacing {width: 15px;}
    #iX-footer {width: 100%;  height:auto}
    .GreenMenuLine {background:#000}
    .rootVoices TD.selected {padding-right: 20px; padding-left:20px;}
    .rootVoices TD.rootVoice {padding-right: 20px; padding-left:20px; width:12px}
}


@media (min-width:1281px) { /* hi-res laptops and desktops */ 
    #rlanguage {position: relative; float:left; border:purple solid 0px;}
    #iX-nav {position: relative; float:left; border:purple solid 0px;}
    #infoemail {display:inline}
    #mainMenu {display:inline}
    #mobileMenu {display:none}
    #DeskTopOnly {display:inline;}
    #MenuSpacing {width: 18px;}
    #iX-footer {width: 100%; height:auto}
    .GreenMenuLine {background:#99cc33}
    .rootVoices TD.selected {padding-right: 24px; padding-left:24px;}
    .rootVoices TD.rootVoice {padding-right: 24px; padding-left:24px; width:12px
}

提前致谢！

Answer 1

将您的第一个@media min宽度设置为300px。 Iphone 5大约是314px，这也是你的媒体查询不起作用的原因。

响应式设计在桌面上而不是在移动设备上调整大小

1 个答案: