What I'm doing

I'm building a responsive website using a mobile-first approach (meaning my default styles are for the mobile view, which are extended via css media queries to optimize the layout for desktop). I've tested my site on my phone (and by shrinking my desktop browser's width to less than 700px) and the mobile view kicks in beautifully.

I'm using the following line of HTML to ensure that on mobile devices, the width of the viewport is equal to the device width like so:
<meta name="viewport" content="width=device-width, initial-scale=1" />

This website needs Infragistcs controls for some forms and so I added Ignite UI 2013.1 to the solution as I normally would. I know I've hooked the Ignite controls up properly because I've done it a million times and have implemented and tested the newly added Ignite Controls. They're fine.

The Problem

This one of the strangest things I've ever come across; I loaded up the site on my phone again since implementing the Ignite controls and the site no longer displays the mobile-optimized view (as if the media queries are being ignored or if the viewport's width did NOT equal the device width).

Here are the steps I took to trouble shoot the issue:

1. Removed all Infragistic-related scripts (including Modernizr), leaving only one line of code relevant to Infragistics:
   <link type="text/css" href="/Styles/Infragistics/structure/infragistics.css" rel="stylesheet"/>
   
   
2. The problem still existed so I removed that css link reference too! The problem was fixed.
3. I thought, "OK, so there's something in that infragistics.css file, that's overwriting my styles" so I began commenting out anything that looked like it could possibly be an issue (starting with the media queries). Long story short, I ended up deleting the entire contents of the ingfragistics.css file and yet I still had the same problem!!
4. I triple cleared the browser on my phone's cache to make sure i was seeing my latest changes reflected. How could a file with 0 bytes cause an issue, yet if i remove the reference to the css all together, the issue goes away? Just for the hell of it, I intentionally broke my reference to the stylesheet file by adding a few extra characters to the href like so:
   <link type="text/css" href="/Styles/Infragistics/structure/infragistics22222.css" rel="stylesheet"/>
   It worked again.

The Solution

Finally, I decided (while writing this post actually) to remove the initial-scale setting from my meta tag so it just read:
<meta name="viewport" content="width=device-width"/>

The issue finally went away!!! So, I restored everything related to Infragistics and now I'm back up and running!

Conclusion

This post was originally supposed to be a "How do I...." post, but as I mentioned in the solution section, I figured out the problem while writing this. So, this post is now more of a reference for others. That said, I'll be adding this information along side my many other Infragistics-related posts on my company's dev blog (http://formativeinnovations.wordpress.com)

However, I still have a number of questions for Infragistics support staff:

1. How is it possible that a file with 0 bytes, can cause an issue with the <meta> tag's initial-scale property, yet if i break that reference, the site is fine? That makes ZERO sense! Like I said, there were 0 Infragistics scripts on the page (I even removed Modenizr), so its not even like some extra stuff could be going on behind the scenes.
2. What exactly is causing the issue when initial-scale is implemented? Keep in mind, that I am not using the mobile version of the Ignite UI controls and again, if I remove infragistics from my solution, initial-scale works as expected. It's only when I reference the structure infragistics.css (even if the file consists of 0 bytes) that it breaks.

Thank you,

Andrew