I'm launching a mobile version of an existing corporate web application that currently loads in an iframe for corporate authentication purposes. When accessing the web app's direct link from a mobile device, it displays beautifully. The problem is that when accessing through the iframe, the site doesn't seem to scale correctly and it looks more like I'm accessing the desktop version of the site. Any suggestions on how make the site within the iframe recognize the mobile device's width and adjust appropriately? I've tried setting the viewport within the HTML and CSS of the site being loaded and even then I'm not getting the change I expect on my iPhone. I haven't had the opportunity to test an Android yet but within our company, iOS is the most important. Some of snippets of code I have tried are listed below. I've also tried 480px and device-width (which I believe I can't access because the iframe is a different domain).

Unfortunately, modifying the iframe page and settings are not an option. Also, Javascript cannot be used as a solution for other reasons.

Within HTML of web app site:

<meta name="viewport" content="width=320px, initial-scale=1.0, user-scalable=no" />

Within CSS of web app site:

@viewport
{
   width: 320px;
}

The above CSS does not seem to render even when not used in device specific @media code.