Currently, I am working on a simple iOS simulator in JavaScript so users can see how content they have created looks on an iPhone and iPad. To do this, I am using AJAX to load the content/page into the simulator. The only problem is that the simulator isn’t life sized. They are perfectly to scale though, so they will fit in a browser.
What I want to know is: is there a way to make the contents of a div render at 50% or 25% of the scripted CSS size? Otherwise, the content will show at pixel-to-pixel size, instead of scaled down.
You can use transform property. something like
transform:scale(0.50, 0.50)
obviously you should replace the two arguments respectively for other scales.
refer to http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale to get the hang of it.