Mixing
HTML - Switch Desktop and Mobile view is not working on browser resize
I have a web page that allows switching between Mobile/Desktop view. I use the below code to toggle between desktop and Mobile layouts.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
$('meta[name="viewport"]').prop('content', 'width=1024'); // Toggle code for Desktop View
The above works perfectly in chrome device simulator mode. However, if I disable the device simulator and resize the desktop to Mobile width and try the toggle, it is not working. But the viewport content property changes as per the toggle code.
Update:
- Responsive design works perfectly in Mobile devices (Say, when width < n Pixels); The desktop and the Mobile view is switchable using a toggle button using the above-mentioned code.
- Responsive design works perfectly in Desktop Browser (When width resized to < n Pixels); The Desktop and Mobile view is not switchable. This is the issue.
html css twitter-bootstrap-3 responsive-design toggle
asked Nov 21 '18 at 23:28
GuganGugan
75112158
add a comment |
I have a web page that allows switching between Mobile/Desktop view. I use the below code to toggle between desktop and Mobile layouts.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
$('meta[name="viewport"]').prop('content', 'width=1024'); // Toggle code for Desktop View
The above works perfectly in chrome device simulator mode. However, if I disable the device simulator and resize the desktop to Mobile width and try the toggle, it is not working. But the viewport content property changes as per the toggle code.
Update:
- Responsive design works perfectly in Mobile devices (Say, when width < n Pixels); The desktop and the Mobile view is switchable using a toggle button using the above-mentioned code.
- Responsive design works perfectly in Desktop Browser (When width resized to < n Pixels); The Desktop and Mobile view is not switchable. This is the issue.
html css twitter-bootstrap-3 responsive-design toggle
asked Nov 21 '18 at 23:28
GuganGugan
75112158
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 '18 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14
add a comment |
I have a web page that allows switching between Mobile/Desktop view. I use the below code to toggle between desktop and Mobile layouts.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
$('meta[name="viewport"]').prop('content', 'width=1024'); // Toggle code for Desktop View
The above works perfectly in chrome device simulator mode. However, if I disable the device simulator and resize the desktop to Mobile width and try the toggle, it is not working. But the viewport content property changes as per the toggle code.
Update:
- Responsive design works perfectly in Mobile devices (Say, when width < n Pixels); The desktop and the Mobile view is switchable using a toggle button using the above-mentioned code.
- Responsive design works perfectly in Desktop Browser (When width resized to < n Pixels); The Desktop and Mobile view is not switchable. This is the issue.
html css twitter-bootstrap-3 responsive-design toggle
asked Nov 21 '18 at 23:28
GuganGugan
75112158
I have a web page that allows switching between Mobile/Desktop view. I use the below code to toggle between desktop and Mobile layouts.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
$('meta[name="viewport"]').prop('content', 'width=1024'); // Toggle code for Desktop View
The above works perfectly in chrome device simulator mode. However, if I disable the device simulator and resize the desktop to Mobile width and try the toggle, it is not working. But the viewport content property changes as per the toggle code.
Update:
- Responsive design works perfectly in Mobile devices (Say, when width < n Pixels); The desktop and the Mobile view is switchable using a toggle button using the above-mentioned code.
- Responsive design works perfectly in Desktop Browser (When width resized to < n Pixels); The Desktop and Mobile view is not switchable. This is the issue.
html css twitter-bootstrap-3 responsive-design toggle
html css twitter-bootstrap-3 responsive-design toggle
asked Nov 21 '18 at 23:28
GuganGugan
75112158
asked Nov 21 '18 at 23:28
GuganGugan
75112158
edited Nov 27 '18 at 5:32
Gugan
asked Nov 21 '18 at 23:28
GuganGugan
75112158
asked Nov 21 '18 at 23:28
GuganGugan
75112158
asked Nov 21 '18 at 23:28
GuganGugan
75112158
75112158
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 '18 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14
add a comment |
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 '18 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14
Did you tried with
initial-scale=1.0? If you use Bootstrap, why you use two different layouts?– SilvioCro
Nov 22 '18 at 1:00
Did you tried with
initial-scale=1.0? If you use Bootstrap, why you use two different layouts?– SilvioCro
Nov 22 '18 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14
add a comment |
2 Answers
2
active
oldest
votes
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered Nov 27 '18 at 1:01
AceAce
324522
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
add a comment |
I tried the same code in different bootstrap layouts. The results are the same. There seems to be no issue with my code.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
This is intended to work on Mobile devices or simulators. Not for desktop browsers.
Switching Mobile/Desktop views in the browser seems not an option.
Refer this answer: set viewport using meta viewport tag for desktop browsers
answered Nov 27 '18 at 21:18
GuganGugan
75112158
add a comment |
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%2f53421872%2fhtml-switch-desktop-and-mobile-view-is-not-working-on-browser-resize%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered Nov 27 '18 at 1:01
AceAce
324522
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
add a comment |
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered Nov 27 '18 at 1:01
AceAce
324522
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
add a comment |
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered Nov 27 '18 at 1:01
AceAce
324522
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered Nov 27 '18 at 1:01
AceAce
324522
answered Nov 27 '18 at 1:01
AceAce
324522
answered Nov 27 '18 at 1:01
AceAce
324522
answered Nov 27 '18 at 1:01
AceAce
324522
324522
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
add a comment |
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
Sorry, I don't get it. Use this to do what?
– Gugan
Nov 27 '18 at 5:28
add a comment |
I tried the same code in different bootstrap layouts. The results are the same. There seems to be no issue with my code.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
This is intended to work on Mobile devices or simulators. Not for desktop browsers.
Switching Mobile/Desktop views in the browser seems not an option.
Refer this answer: set viewport using meta viewport tag for desktop browsers
answered Nov 27 '18 at 21:18
GuganGugan
75112158
add a comment |
I tried the same code in different bootstrap layouts. The results are the same. There seems to be no issue with my code.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
This is intended to work on Mobile devices or simulators. Not for desktop browsers.
Switching Mobile/Desktop views in the browser seems not an option.
Refer this answer: set viewport using meta viewport tag for desktop browsers
answered Nov 27 '18 at 21:18
GuganGugan
75112158
add a comment |
I tried the same code in different bootstrap layouts. The results are the same. There seems to be no issue with my code.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
This is intended to work on Mobile devices or simulators. Not for desktop browsers.
Switching Mobile/Desktop views in the browser seems not an option.
Refer this answer: set viewport using meta viewport tag for desktop browsers
answered Nov 27 '18 at 21:18
GuganGugan
75112158
I tried the same code in different bootstrap layouts. The results are the same. There seems to be no issue with my code.
$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View
This is intended to work on Mobile devices or simulators. Not for desktop browsers.
Switching Mobile/Desktop views in the browser seems not an option.
Refer this answer: set viewport using meta viewport tag for desktop browsers
answered Nov 27 '18 at 21:18
GuganGugan
75112158
answered Nov 27 '18 at 21:18
GuganGugan
75112158
answered Nov 27 '18 at 21:18
GuganGugan
75112158
answered Nov 27 '18 at 21:18
GuganGugan
75112158
75112158
add a comment |
add a comment |
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.
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%2f53421872%2fhtml-switch-desktop-and-mobile-view-is-not-working-on-browser-resize%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
Did you tried with
initial-scale=1.0? If you use Bootstrap, why you use two different layouts?– SilvioCro
Nov 22 '18 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
Nov 27 '18 at 7:33
Yes, I am calling the same code in resize().
– Gugan
Nov 27 '18 at 15:14