I would really appreciate it if someone could help me. Please let me know if you need more info in the comments.

My Set Up

I have a windows 7 pc. On it I run a virtual box VM with a ubuntu 12 guest os and LAMP setup. I share files between the two machines using samba from linux to windows and using windows file sharing (Workgroup) the other way round. The vm is set up with a bridged network adapter and can happily serve web pages to my host machine.

I use DHCP reservations on my home wireless router/modem to reserve an ip for the vm and give it a sitename.dev in my windows host file so I can access it at sitename.dev through the browser.

The Problem

So far so good but I have a dev project which needs a lot of mobile template development, now obviously I can use a browser plugin to simulate a mobile device but I would like to be able to see the real thing easily on my phone during development.

So ideally I would like a similar setup on my iphone to my windows setup

Now I'm not great on networking and dont have much experience with web server set up. So when I typed the ip of my virtual box into my iphone i wasnt expecting to see anything. I was pleasantly surprised when my site loaded up. The javascript even seems to be running but the images and css are not happening.

My Question

1) What is happening here, is it something to do with the bridged set up on the vm network?

2)How do I make the sites load properly through my phone

Notes

I've also tried another phone.

The same sites viewed on live servers work fine.