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

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最小宽度设置为300px。 Iphone 5约为314像素，这就是为什么您的媒体查询无法正常工作的原因。