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

我正在使用媒体查询根据宽度调整站点元素的大小。我曾在我的桌面上开发并测试过它，它工作得非常好，但当我在iPhone 5上启动并测试它时，它根本没有调整大小，而是全幅显示

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

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

---

提前谢谢

将第一个@media min width设置为300px。iPhone5大约是314px，这就是为什么你的媒体查询不起作用。

使用这里解释的视口：是的，这是我做的第一件事。我编辑了这个问题，以便显示这个字符串。这个答案似乎对我不起作用。在你的脑海里我看到了这样一句话：，你的意思是有人重写了它？@Patrick:你能澄清到底是什么问题吗？我看到三个定义了宽度的元素：iX footer，在所有断点处设置为100%；MenuPacing，宽度在1到18像素之间；和.rootVoices TD.rootVoice，介于0和12之间。其中哪一个不符合您的预期？例如，在上，我的iPhone 5C上的框显示为绿色，使用与您相同的媒体查询和元视口标记。iPhone 5的屏幕宽度为320像素，与之前的所有iPhone一样。@Paul，您错了。对于如此小的屏幕，iPhone5具有高像素密度。如果将最小视图宽度设置为314px以下，将解决他的问题。看起来像。正如信息框显示部分所说，屏幕是1136 x 640物理像素，分辨率是2倍，即640/2=320。哇，伙计，感谢你这么聪明。你不明白。像素和像素密度是你应该看到的。我坚持我在投票前所说的话。314px对于iphone5，你需要接受教育，开始阅读。此外，这将解决他的问题。那么问题是什么呢？

@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
}