Definitely have that bad boy in place Went through that whole process of testing different meta tags too targeting pixel densities and specific width and the rest. Using the one above now which is working fine. It’s just the actual @media only screen and (min-device-width blah blah that is causing an issue…
I would not use device-width. Since I cannot see your media queries, I would say that that is your issue. Responsive design is device agnostic and using device-width is almost anti-responsive - since you are designing for that device width.
Instead, use max-width and min-width if you have to. Shrink your browser window, when it breaks your site - you have your break point. Fix that and then shrink again. This method of using the max-width then will be more consistent irrespective of the device, orientation or pixel density.
Using max-device-width is just a rabbit trail of getting specific with orientation and pixel density etc…
That’s not really true of the device-width meta element. Mobile devices tend to display a site at a width of around 800-1000px by default (called the “layout viewport”), meaning that a lot of the page is off screen. So media queries will be unreliable without the meta element, because you don’t know how wide the device thinks the page is. Using the meta element ensures that the layout viewport matches the pixel width set by the device vendor as the width of the screen (“device independent pixels”). So by using the meta element, you’ll know that on devices like the iPhone, media queries targeting a device width of 320px will kick in as expected.
I might have exaggerated to make a point… sure you can combine device width queries with the content=max-device-width meta tag. But we are really not worried, nor should we be, about the device width. So while it is available and possible to use, I don’t think we should use it. So I think that meta viewport and width queries are the best options.