我的移动响应网站始终显示最小的CSS宽度视图-可能是什么原因造成的？

Question

I am working on a mobile responsive website which is designed for iPhone 6 Plus and smaller. (iPhone 6 & 5 for now).

When displaying in using "Inspect element" via Chrome browser and setting a device of ones I mentioned above - it works fine.

When displaying it on the real mobiles I only get the smallest width.

@media (max-width: 415px) {
...
}

@media (min-width :  320px) and (max-width : 375px ) {
...
}

@media (min-width :  240px) and (max-width : 320px ) {
...
}

I used both of these in my HTML :

<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />

I cant paste all my code here, I have no permission.

What other problems might cause this? Are there better ways to test mobile responsive websites? Because it seems like testing it on chrome or websites like 'screenfly' aren't that reliableץ

Answer 1

Your issue might be having same min-width and max-width at 320px

So, try this:

@media (min-width :  321px) and (max-width : 375px ) {
...
}

@media (min-width :  240px) and (max-width : 320px ) {
...
}