使用IFrame进行响应式设计测试面临IE7和IE8问题

Question

I am trying to create a page which accepts URL of the website and shows me all the display sizes horizontally.

something like this : http://dfcb.github.com/Responsivator/ or something like this : http://mattkersley.com/responsive/

In both the websites they are using iframes to load content in the specified width and then they are playing with width and height for different devices, it works well in all browsers apart from IE7 and IE8 I am wondering how to make it work on IE 7 and 8. There should be some way or other.

I read somewhere that http://www.ehow.com/how_8123203_use-iframes-ie8.html you can use P3P headers but I am not sure.

language is not an issue. but I just want it to be working on every browser. I have developed a test page and kept it online : http://sentimentanalysis.comeze.com/responsiate/

if you see closely it works fine on chrome, ff, IE 9 but works pretty weird on IE7 and 8, how to make it look same? Is it possible?

Any pointers would be helpful.

Answer 1

Responsive design doesn't work in IE7 and 8.

Using methods like:

@media only screen and (max-width: 768px){}

do not working in IE7 or IE8, the only way around this is the client side Chrome frame.

Mobile headers (not responsive media queries)

You can send pretend mobile headers but that's about it. This would require a lot of messing about to fool the server into thinking you are on a mobile device, but it will take a lot of doing. Your server will have to request the page and all of it's assets (images, styles and scripts) and it won't show the true responsive design of the site: only the full mobile site if the target has one.