Link to home
Start Free TrialLog in
Avatar of Marco Orlando
Marco Orlando

asked on

How to show mobile website inside a desktop website

User generated imageUser generated imageHi 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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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?
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.
Avatar of Marco Orlando
Marco Orlando

ASKER

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
Hi David thanks for your help, I mean the second case, e trying to see different mobile versions,
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.
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
@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
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.
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.
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.
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.
@Julian Hansen Yes I detect because the mobile website is different as you can see in the images
@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
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.
@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
@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?
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.