There are so many neat responsive viewport tools out there. Firefox even has a nifty little development feature called "Responsive Design Mode". But being as I do a lot of work inside RapidWeaver, which uses webkit, I have no way (that I know of) to take advantage of any of these solutions outside of anything other then a full blown browser window.

So on a sunny afternoon I hacked together rFrame, a self reflecting jQuery function that emulates the view port sizes of a handful (for now) of devices to give you a rough idea of how your web site/application might look on that device.

It's pretty crude right now and only works in Chrome and Safari for the time being, so fork it and make it better.

http://seydoggy.github.io/rFrame/

• Download the latest release.
• Clone the repo: git clone git://github.com/seyDoggy/rFrame.git
• Install with Bower: bower install rFrame

1. Include jQuery in your page (likely just before the body tag).

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Include the rframe plugin just after the call to jQuery.

   <script src="js/jquery.rframe.js"></script>

3. Open the page in a browser and type the following in the console:

   $.rFrame()

4. Use the selection menu to pick a device and orientation.

5. If you want to start with a particular viewport, you can specify that too:

   $.rFrame({device:'iPad',view:1})

6. And of course you can do all of this from within a script as opposed to running it from the console:

   <script>
   	$.rFrame({
   		device:'iPad',
   		view:1
   	});
   </script>

For RapidWeaver developers looking to incorporate rFrame as an option in their themes, ignore the above and do the following:

1. Include RwSetGet in your scripts.

2. Include rFrame in your theme folders.

3. Make an options file that includes the following script (options are... erm... optional):

   jQuery(function ($) {
   	$.getScript(RwGet.pathto("some/place/jquery.rframe.min.js"), function() {
   		$.rFrame({
   			device:'iPhone4',
   			view:1
   		});
   	});
   });

4. Make an option and include it in your Theme.plist

   <dict>
   	<key>GroupDisplayName</key>
   	<dict>
   		<key>de</key>
   		<string>Device Emulation</string>
   		<key>en</key>
   		<string>Device Emulation</string>
   		<key>fr</key>
   		<string>Device Emulation</string>
   		<key>it</key>
   		<string>Device Emulation</string>
   		<key>ja</key>
   		<string>Device Emulation</string>
   	</dict>
   	<key>GroupMembers</key>
   	<array>
   		<dict>
   			<key>DisplayName</key>
   			<dict>
   				<key>de</key>
   				<string>Off</string>
   				<key>en</key>
   				<string>Off</string>
   				<key>fr</key>
   				<string>Off</string>
   				<key>it</key>
   				<string>Off</string>
   				<key>ja</key>
   				<string>Off</string>
   			</dict>
   			<key>Enabled</key>
   			<true/>
   			<key>Files</key>
   			<array/>
   			<key>Name</key>
   			<string>Off</string>
   			<key>Type</key>
   			<string>Stylesheet</string>
   		</dict>
   		<dict>
   			<key>DisplayName</key>
   			<dict>
   				<key>de</key>
   				<string>On</string>
   				<key>en</key>
   				<string>On</string>
   				<key>fr</key>
   				<string>On</string>
   				<key>it</key>
   				<string>On</string>
   				<key>ja</key>
   				<string>On</string>
   			</dict>
   			<key>Enabled</key>
   			<false/>
   			<key>Files</key>
   			<array>
   				<string>options/emulator/emulator_on.js</string>
   			</array>
   			<key>Name</key>
   			<string>On</string>
   			<key>Type</key>
   			<string>Javascript</string>
   		</dict>
   	</array>
   	<key>GroupName</key>
   	<string>Device Emulation</string>
   	<key>GroupSelectionLimit</key>
   	<integer>1</integer>
   </dict>

$.rFrame({
	background : '#dedede',/* 'body' background color */
	color : '#dedede',/* toolbar text color */
	toolbar_bg: '#333',/* toolbar background color */
	btn_bg: '#3e8ec0',/* Portrait/Landscape button background color  */
	btn_color: '#fff',/* Portrait/Landscape button text color  */
	font: 'Verdana',/* toolbar font  */
	device:'iPhone5',/* default device */
	device_color : '#d0d0d0',/* device color */
	view : 0,/* default orientation, portrait = 0, landscape = 1 */
	forkme: true,/* show Github forkme banner */
});