Hopefully someone may know what I mean and where I may find such a thing.
I'm creating a new web site and as part of it I'll be offering mobile web design. What I need if possible, is something that, should a user click on one of my examples, it load up a mobile browser (not the mobile site on a normal web browser). More like an emulator that will allow them to see working examples of potential sites.
Is there anything out there that will do this, or am I looking at opening a new window to a set size and displaying the site within it?
Please Note --- Whilst writing this out, I may have stumbled across a potential floor, as this may expose code.
I'm thinking I should perhaps consider putting JPEGs or PNGs that they can scroll through so not to expose the code behind the mobile site itself?!
If there is such an emulator or the likes that is available (and doesn't show code in the background) I'd be more than happy to be pointed in the right direction!
Please correct me if I misunderstood your question, but it sounds like you want to let users preview a responsive design at different screen sizes while denying them access to the source code.
If that's the case, rendering the design as a flat image file for previewing purposes is your best bet, even though it would sacrifice any interactive aspects of your design. It's a rough trade-off.
I assume you have a legitimate reason for hiding the code. But if haven't already, you might want to ask yourself what's motivating you to conceal your source code in the first place. The web is built on open standards and accessibility; you'll have to go through a lot of contortions to hide static assets like HTML, CSS, and javascript from a browser. I understand if you're concerned about a sketchy client using your work without payment, but that's more of a contracts/legal issue than a technical one.
That said, you can always place the mobile site's main content (or an image of the content if you must hide the code) within a div of a specified width and height to visually emulate a phone. Wrap it with some phone graphics, control the overflow with overflow-y: scroll; and overflow-x: hidden; and there you have it.
Web Design Weekly is a nice example of this concept in action.
EDIT: it occurred to me that another option you could feasibly explore is video instead of static images. Always an option if you need to wow a client. Typeform.com is a good example of what I'm talking about.