controlling the display size of content inside an iframe
I am having an issue finding an answer to this on Google so I thought I would give this a shot. I am building a page on my site that includes a theme editor that displays a preview of what you are building in an iframe. I control both the main site and the iframe so edits to either are accessible.
The problem I am having is I want to give the user the option to view the desktop, tablet and phone views but when I resize the iframe the site also adjusts as it (as it should) has
<meta name="viewport" content="width=device-width, initial-scale=1.0">
inserted in the head of the the theme. What I am looking for is a way to show the desktop view, possibly a larger desktop, when using the builder on a smaller laptop or tablet so the width of the users screen is smaller than what the desktop view would be. Do I need to update the viewport tag when the device view is changed or is there something I am missing here?
Thanks!
html css iframe
add a comment |
I am having an issue finding an answer to this on Google so I thought I would give this a shot. I am building a page on my site that includes a theme editor that displays a preview of what you are building in an iframe. I control both the main site and the iframe so edits to either are accessible.
The problem I am having is I want to give the user the option to view the desktop, tablet and phone views but when I resize the iframe the site also adjusts as it (as it should) has
<meta name="viewport" content="width=device-width, initial-scale=1.0">
inserted in the head of the the theme. What I am looking for is a way to show the desktop view, possibly a larger desktop, when using the builder on a smaller laptop or tablet so the width of the users screen is smaller than what the desktop view would be. Do I need to update the viewport tag when the device view is changed or is there something I am missing here?
Thanks!
html css iframe
add a comment |
I am having an issue finding an answer to this on Google so I thought I would give this a shot. I am building a page on my site that includes a theme editor that displays a preview of what you are building in an iframe. I control both the main site and the iframe so edits to either are accessible.
The problem I am having is I want to give the user the option to view the desktop, tablet and phone views but when I resize the iframe the site also adjusts as it (as it should) has
<meta name="viewport" content="width=device-width, initial-scale=1.0">
inserted in the head of the the theme. What I am looking for is a way to show the desktop view, possibly a larger desktop, when using the builder on a smaller laptop or tablet so the width of the users screen is smaller than what the desktop view would be. Do I need to update the viewport tag when the device view is changed or is there something I am missing here?
Thanks!
html css iframe
I am having an issue finding an answer to this on Google so I thought I would give this a shot. I am building a page on my site that includes a theme editor that displays a preview of what you are building in an iframe. I control both the main site and the iframe so edits to either are accessible.
The problem I am having is I want to give the user the option to view the desktop, tablet and phone views but when I resize the iframe the site also adjusts as it (as it should) has
<meta name="viewport" content="width=device-width, initial-scale=1.0">
inserted in the head of the the theme. What I am looking for is a way to show the desktop view, possibly a larger desktop, when using the builder on a smaller laptop or tablet so the width of the users screen is smaller than what the desktop view would be. Do I need to update the viewport tag when the device view is changed or is there something I am missing here?
Thanks!
html css iframe
html css iframe
asked Nov 11 at 21:57
Action Coding
710412
710412
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253650%2fcontrolling-the-display-size-of-content-inside-an-iframe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253650%2fcontrolling-the-display-size-of-content-inside-an-iframe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown