How to show mobile website inside a desktop website

Marco Orlando
Marco Orlando used Ask the Experts™
on
example of mobile website in iframe and in simulatorexample of mobile website in iframe and in simulatorHi I would like show a mobile version website in my website on a desktop computer, how I can do it?
-I was thinking using an iframe, but they show me the desktop version inside the iframe.
- I tried to change the user-agent of the iframe but doesn't work for me (maybe is possible)
- I don't want use chrome inspector to achieve this.
- I don't want use version like m.website.com because I don't know how to generate all the different URL
- I prefer a client solution without server if is possible
- I there is a solution I'll love have some working code

(for instance you can try https://www.linguee.it/)
Thanks

(for instance you can try https://www.linguee.it/)
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I don't understand the question?

Why can't you just browse to the URL of your mobile site? Trying to understand the mobile on desktop?
David FavorFractional CTO
Distinguished Expert 2018

Commented:
You asked, "Hi I would like show a mobile version website in my website on a desktop computer, how I can do it?"

Providing more detail will help.

Do you mean...

1) You'd like to show only the Mobile version of your site to all visitors, Desktop/Tablet/Phone.

2) You're trying to see different mobile versions, so you're really just trying to debug various screen resolutions.

Author

Commented:
Hi Julian
1) because there are to many url as you can see in this file https://github.com/renanbr/linguee-it/blob/master/popup/script.js 

2) show mobile in desktop, because i need two mobile website in the same desktop website page like here https://codepen.io/orlandoangular/pen/qQXPob
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi David thanks for your help, I mean the second case, e trying to see different mobile versions,
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Ah... that's simple then.

There many online tools that do this... They work... somewhat okay + most are very slow.

I prefer using Chrome + Chris Pederick's Web Dev Tool Extension, then just visit a page + click...

Black Gear -> Resize -> View Responsive Layouts

This little tool can produce many layout + rendering is < 1second for all layouts combined, so instant.

You can also add in any type of custom screen resolution, so even if you have an oddball mobile size to debug, you can enter a size in <30 seconds + render the new size.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Still confused - if you want to see what your mobile site looks like on a desktop browser why not just use the emulator

FF + Chrome: Shift + Ctrl + M

Author

Commented:
@David Favor sorry but I have to show the result in a website like the codepen https://codepen.io/orlandoangular/pen/qQXPob, without any tools, It is for end user

@Jiulian Your confusion is my fault, the emulator is very good but I need a my own website that show the mobile website not the browser, for instance you cannot show two mobile websites in the same page, but you have to open two simulator. I want I cand of this https://codepen.io/orlandoangular/pen/qQXPob but with the correct mobile version of linguee
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
So you want to showcase your mobile sites in one page.

Why can't you use an iframe?

You have two options that I can see

1. An Iframe for each site
<div class="row">
  <div class="col-md-6"><iframe src="http://path.to.first.mobile.site.com" style="border: 0; width: 100%"></iframe</div>
  <div class="col-md-6"><iframe src="http://path.to.second.mobile.site.com" style="border: 0; width: 100%"></iframe</div>
<./div>
2. A div for each site

The Div is dynamically loaded with a jQuery + Bootstrap
<div class="row">
  <div class="mobile-site-1 col-md-6"></div>
  <div class="mobile-site-2 col-md-6"></div>
</div>
<script>
$(function() {
  $('.mobile-site-1').load('http://path.to.first.mobile.site.com');
  $('.mobile-site-2').load('http://path.to.second.mobile.site.com');
});
</script>

Open in new window


In both cases you can use JavaScript to change the height / width of the containers.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Having re-read your question - I think I understand it more.

Are you saying that when you try and load the mobile link in a desktop (iframe) it goes to the desktop version?

If so, what are you using to determine which version of the site is shown.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Ah...

If I understand... You're goal is to recreate http://responsivedesignchecker.com/ or similar, to test one site with various mobile versions produced.

If correct, best to troll through GitHub + find a project which already implements this code + use the project code.

You can take a route similar to Julian's suggestion, which is how most testers work... which will cause a full page render for every single device type you support. Device type == Screen resolution.

I'd look through GitHub + look for some code which only renders a site once, then implements various mobile views using media queries to resize site view.

Having 0 render time moving between various site views will be a far more pleasant visitor experience, than waiting for multiple site renders... especially when flipping back + forth between views.

This is how the Web Developer tool works inside browsers.

In fact... You might be able to dig into the Web Developer tool extension + use this code as a starting point.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Tip: Be sure code wrapping your tool is 100% HTML valid, as any HTML errors or warnings in your code will ripple into your tool, then into site you're rendering.

Tip: Use some sort of container for the site being tested.

Read https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements carefully before choosing.

Likely also good to read similar comparisons + determine which of <object> or <embed> or <iframe> is best for your project.

Author

Commented:
@Julian Hansen Yes I detect because the mobile website is different as you can see in the images

Author

Commented:
@david favor http://responsivedesignchecker.com/ or similar, to test one site with various mobile versions produced. is correct but it has the same problem that I want to solve. If you use desktop computer it will show the desktop version inside the iframe
David FavorFractional CTO
Distinguished Expert 2018

Commented:
You said, "If you use desktop computer it will show the desktop version inside the iframe."

How you display you data is up to you.

You'll take one of the existing GitHub projects or roll your own per Julian's suggestions.

For this to work... reasonably well, you'll likely use <iframe> or <object> or <embed> to keep your test site content partitioned from site under test.

This is essential to contain HTML errors. If you try to somehow actually inline the HTML from another site, you'll face two problems.

1) This may break CORS, so you'll get zero content rendered from site under test.

2) Or HTML errors from site under test will leak through to your tester + render mangled HTML.

Sounds like this might be your first time injecting content from an external site, which is what you'll be doing for this type of tester.

Best you just play around with the various GitHub projects.

You can always hire someone to assist you, who's familiar with this type of tech. If you're working toward either a paid or rock solid tester, might be good to hire someone to work out details of your first release version, as there are lots of minor problems you'll have to work out along the way.

Author

Commented:
@david I also tried object and embed but I have the same problem

@all I think is a problem with user agent,
- I can think a server side solution but I think that external website will block my Ip after a lot requests, so I prefer a client solution, if is it possible

Author

Commented:
@david You said, "How you display you data is up to you."
It is false because it's not about how to display but witch code are you showing, the code of mobile version or the code of the desktop version.

I ll  hire someone to assist me only if there is a sure solution otherwise it is useless. Do you know somebody?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial