I was just asked to help fix a problem for a website. Their responsive design was working correctly on desktop browsers, but fail to response on both iOS and Android.
After some 30 minutes, everything seems to be done correctly. Where could the problem be? With my limited knowledge, I thought that perhaps max-width is one of those CSS that does not work well on mobile browsers, but that does not turn out to be the case. After some further fumbling, I noticed this meta tag.
<meta name = "viewport" content = "width=1280, initial-scale=0.75, minimum-scale=0.75, user-scalable = yes">
Why 1280 wide and 0.75 scale? I had no idea and no one to ask. But this seems to be overriding the width that mobile browser reports, thus render (pun intended) the responsive design inactive.
When I commented that out and replace with the standard
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything seems to work again now.