TimBenjamin
New Member
I am calling different CSS files depending on window sizes. I have iFrames which act as previewers for users so they can see what their website would look like on a mobile, pc, tablet etc... Their screen.height is always the same, it is their window.innerHeight that changes as it is an iFrame on a Desktop/laptop. I need to find the iFrames id as the css is specific to that iFrame.Now Google Chrome keeps dropping the iFrame's window.innerWidth to 0 a lot. All other browsers are fine but i was wondering if there was a possibility to find what iFrame I am using at the time so I can write a specific CSS to it even if the window.innerWidth or innerHeight is equal to 0.I am using a nested if statement at the moment. Here is a small snippet of the code:\[code\] if(navigator.userAgent.match(/Windows NT/i)){if(window.innerWidth < 1){if(document.getElementById('myiFrameName').contentWindow.document == true){document.write('<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/8788830/ui/mobile/css/site.css">');}}\[/code\]The reason the userAgent is Windows NT is because the iFrame is opened on a Windows PC. I cannot use screen.width as it will always stay the same because it's an iFrame on the PC. Any ideas? I understand the above snippet may be totally wrong in regards to the location of the iFrame.