[英]Responsive Design resizing on desktop, not on mobile
I'm using media queries to resize site elements based on width. 我正在使用媒体查询来根据宽度调整网站元素的大小。 I was developing and testing it on my desktop where it works perfectly, but as soon as I launched it and tested it on mobile (an iPhone 5) it does not resize at all - it displays at full width.
我当时正在可以完美运行的台式机上进行开发和测试,但是一旦启动并在移动设备(iPhone 5)上对其进行了测试,它根本不会重新调整大小,而是全屏显示。
I have searched around for responses to this and the general consensus seems to be to set my viewport. 我一直在寻找有关此问题的解决方法,并且普遍的共识似乎是在设定我的观点。 But I have already done that — in my header I have:
但是我已经做到了—在标题中,我有:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is there something that I may have which may be overriding this? 我有什么可以超越这个的吗?
My media queries look like this: 我的媒体查询如下:
@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
}
Thanks in advance! 提前致谢!
Set your first @media min width to 300px. 将您的第一个@media最小宽度设置为300px。 The Iphone 5 is around 314px and is why your media query is not working.
Iphone 5约为314像素,这就是为什么您的媒体查询无法正常工作的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.