Advice needed for Responsive Website

Hi.

I am in the process of trying to redevelop a website, where a lot of product data resides in Notes databases.

The new design is responsive, with it scaling according to the device it is being viewed on.

In the past, the way I was able to display the product data from the Notes database, was achieved through the use of an Iframe inside a page.

However, using the same technique does not seem to work now, as the Iframe seems to limit how the data is displayed when scaling between devices.

Also, when the page is viewed on a phone, the height is all wrong. I have tried various things to tidy it up, but it will not display correctly.

I am alsohampered by the fact that the amount of data available can vary between products, thus preventing fixed heights for the Iframe etc.

However, if I add all the HTML / CSS / Jquery to the main product form, and then view it in a browser via its uniqueid, it displays perfectly across all devices.

The only downside to this is that the URL is a mess, as it looks like this…

http://domain/database.nsf/A000129238992348932802349234 http://domain/database.nsf/A000129238992348932802349234

To get around this, I have done a substution rule in the Directory related to the product, so that it now looks like this.

http://domain/database.nsf/product_name http://domain/database.nsf/product_name

The ACL of the database is set with Anonymous to Reader.

Can anyone suggest any problems I might have with going with the Form option outlined above, apart from the obivious maintenance of the substitution rules for all the products.

In the alternative, can someone suggest a workable method of embedding the product form in a page using an Iframe that scales correctly.

Many thanks.