How to show mobile website inside a desktop website

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
Marco OrlandoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
Marco OrlandoAuthor 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
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

Marco OrlandoAuthor Commented:
Hi David thanks for your help, I mean the second case, e trying to see different mobile versions,
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
Julian HansenCommented:
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
Marco OrlandoAuthor 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
Julian HansenCommented:
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.
Julian HansenCommented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
Marco OrlandoAuthor Commented:
@Julian Hansen Yes I detect because the mobile website is different as you can see in the images
Marco OrlandoAuthor 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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
Marco OrlandoAuthor 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
Marco OrlandoAuthor 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?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Chrome

From novice to tech pro — start learning today.