HTML - Switch Desktop and Mobile view is not working on browser resize
up vote
0
down vote
favorite
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 at 23:28
Gugan
75012158
This question has an open bounty worth +50
reputation from Gugan ending in 4 days.
The current answers do not contain enough detail.
add a comment |
up vote
0
down vote
favorite
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 at 23:28
Gugan
75012158
This question has an open bounty worth +50
reputation from Gugan ending in 4 days.
The current answers do not contain enough detail.
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 at 23:28
Gugan
75012158
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 at 23:28
Gugan
75012158
asked Nov 21 at 23:28
Gugan
75012158
edited yesterday
asked Nov 21 at 23:28
Gugan
75012158
asked Nov 21 at 23:28
Gugan
75012158
asked Nov 21 at 23:28
Gugan
75012158
75012158
This question has an open bounty worth +50
reputation from Gugan ending in 4 days.
The current answers do not contain enough detail.
This question has an open bounty worth +50
reputation from Gugan ending in 4 days.
The current answers do not contain enough detail.
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday
add a comment |
Did you tried withinitial-scale=1.0? If you use Bootstrap, why you use two different layouts?
– SilvioCro
Nov 22 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday
Did you tried with
initial-scale=1.0? If you use Bootstrap, why you use two different layouts?– SilvioCro
Nov 22 at 1:00
Did you tried with
initial-scale=1.0? If you use Bootstrap, why you use two different layouts?– SilvioCro
Nov 22 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
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 yesterday
Gugan
75012158
add a comment |
up vote
-1
down vote
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered 2 days ago
Ace
325522
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
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 yesterday
Gugan
75012158
add a comment |
up vote
0
down vote
accepted
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 yesterday
Gugan
75012158
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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 yesterday
Gugan
75012158
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 yesterday
Gugan
75012158
answered yesterday
Gugan
75012158
answered yesterday
Gugan
75012158
answered yesterday
Gugan
75012158
75012158
add a comment |
add a comment |
up vote
-1
down vote
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered 2 days ago
Ace
325522
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
add a comment |
up vote
-1
down vote
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered 2 days ago
Ace
325522
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
add a comment |
up vote
-1
down vote
up vote
-1
down vote
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered 2 days ago
Ace
325522
Try to use bootstrap media query breakpoints
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
answered 2 days ago
Ace
325522
answered 2 days ago
Ace
325522
answered 2 days ago
Ace
325522
answered 2 days ago
Ace
325522
325522
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
add a comment |
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
Sorry, I don't get it. Use this to do what?
– Gugan
yesterday
add a comment |
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 at 1:00
Did you try with .resize(). or try calling the same code within .resize().
– vssadineni
yesterday
Yes, I am calling the same code in resize().
– Gugan
yesterday