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

Question

我正在使用媒体查询根据宽度调整网站元素的大小。我在我的桌面上开发和测试它，它工作得很好，但是当我启动它并在移动设备上测试它时（iPhone 5）它根本没有调整大小 - 它以全宽显示。

我已经四处寻找对此的回应，普遍的共识似乎是设置我的视口。但我已经这样做了——在我的 header 中我有：

<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 最小宽度设置为 300 像素。 Iphone 5 大约是 314px，这就是您的媒体查询不起作用的原因。

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

Responsive Design resizing on desktop, not on mobile

html

css

mobile-safari