CODEWITHSUNDEEP
htmlcssiframe
RSM
RSM

Reputation: 15118

Make a website appear in an iframe as if it was on a smartphone?

If I have an iframe, opening te url http://www.google.com, it loads the whole webpage, unless there is a mobile stylesheet, like it would on a desktop browser, with scroll bars. How do I make it open it as if it was being viewed on a smartphone?

<iframe id="frame" src="http://www.google.com" width="320" height="480"></iframe>

Upvotes: 0

Views: 3319

Answers (4)

Qodestackr
Qodestackr

Reputation: 3

Sample React/Nextjs Guide for To produce like an iframe for mobile screens:

import React from 'react';

export default function Page() {
  return (
    <div className="mobile-phone">
      <div className="screen">
        <iframe
          src="https://datalawcompanion.org/"
          style={{
            width: '100%',
            border: 'none',
            height: '100%',
          }}
        />
      </div>
    </div>
  );
}

Some styles:


/************** IFRAME SECTION STYLING *************/
.mobile-phone {
  position: relative;
  width: 375px; 
  height: 667px; 
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  overflow: hidden;
}

.screen {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 60px;
  overflow: hidden;
}

.mobile-phone::after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 0

user1515909
user1515909

Reputation: 26

Ok.. but la suggesting response isn't so true.. It´s possible view a website as a smartphone in a iframe.. of course, the site must be prepared with responsive design methods.. but it´s possible

Follow these 3 steps: Edit the size and border of the IFrame in the step #2 css code.

1.) Create page to frame Create a new webpage called "framepage.htm" with responsive design capacity (my simple blog as example) that will display inside the IFrame window. 2.) Add IFrame embed code Select and copy the following code. Paste it into the content area of your HTML webpage where you want the IFrame window to appear. 

<iframe name="Framename" src="http://mlaynessanchez.blogspot.com" width="400" height="200" frameborder="0" scrolling="auto" class="frame-area">
</iframe>

3.) Add CSS code Select, copy, and paste the following css at the bottom of your template global style .css file. The css height and width will overwrite the IFrame HTML code. Edit the following with your height, width, border and overflow options.

The following code works for both responsive and non-responsive webpages. 

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;
  height: 300px;
  overflow: auto;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

If you do not have a global css file, add the above code to the head section of your webpage just before the tag between the following tags. 

<style type="text/css">
  /* css code goes here */
</style>

source: http://allwebco-templates.com/support/S_script_IFrame.htm

Upvotes: 0

Jeremy
Jeremy

Reputation: 512

The only way you'd get a third party site to load as if it was in a mobile browser in an iframe would be for the browser itself to send the appropriate user agent string. This isn't something you have control over as a site developer.

However, if you can request the page content server side, you would be making the http request and could control what user agent string you send the other server. In .Net, you could create a new HttpWebRequest object and set the UserAgentString before making the request.

Keep in mind that this is effectively "tricking" the other server to return content that is meant for certain platforms. You would also be rendering someone else's content from your server when you reply to your client's requests. Be sure to check any terms of service for whatever site content you are dealing with to make sure it isn't a problem.

Upvotes: 0

Quentin
Quentin

Reputation: 944009

There is no way for a website to instruct a browser to masquerade as a mobile browser when loading a page in an iframe.

You would need the page in the frame to be accessible under a different URI that would offer up the mobile content and stylesheets by default instead of using any kind of detection (be it media queries, user-agent sniffing, or anything else).

Upvotes: 3

Related Questions