Mobile user agent causes responsive design not to work
I'm part of a team that has developed a portal application which contains responsive design CSS. The responsive breakpoints don't seem to apply when using a mobile device, or when using the device toolbar in Chrome to simulate this.
The screenshots below show the desired behavior when shrinking the viewport of a desktop browser:
1053 width - well away from breakpoint
771 width - just outside of 768 breakpoint
767 width - just within breakpoint and single-column view showing
575 width - well within breakpoint, single-column view showing
These four screens show the behavior we need to see, with the leftmost panel disappearing and the rightmost panel taking up the entire viewport below 768 screen width, but this only works on desktop browsers. Mobile behavior is shown with the device toolbar enabled:
1053 mobile - design looks similar
771 mobile - 100% and no auto-zoom enabled
767 mobile - inside breakpoint, but zoom is already happening
575 mobile - well inside breakpoint, site zoomed rather than responsive
Can anyone help me identify why the responsive CSS that works fine on the desktop does not activate for identical aperture widths on mobile? Is this a user agent issue?
responsive-design viewport user-agent mobile-website
asked Nov 25 '18 at 18:46
R ReunR Reun
12
add a comment |
I'm part of a team that has developed a portal application which contains responsive design CSS. The responsive breakpoints don't seem to apply when using a mobile device, or when using the device toolbar in Chrome to simulate this.
The screenshots below show the desired behavior when shrinking the viewport of a desktop browser:
1053 width - well away from breakpoint
771 width - just outside of 768 breakpoint
767 width - just within breakpoint and single-column view showing
575 width - well within breakpoint, single-column view showing
These four screens show the behavior we need to see, with the leftmost panel disappearing and the rightmost panel taking up the entire viewport below 768 screen width, but this only works on desktop browsers. Mobile behavior is shown with the device toolbar enabled:
1053 mobile - design looks similar
771 mobile - 100% and no auto-zoom enabled
767 mobile - inside breakpoint, but zoom is already happening
575 mobile - well inside breakpoint, site zoomed rather than responsive
Can anyone help me identify why the responsive CSS that works fine on the desktop does not activate for identical aperture widths on mobile? Is this a user agent issue?
responsive-design viewport user-agent mobile-website
asked Nov 25 '18 at 18:46
R ReunR Reun
12
add a comment |
I'm part of a team that has developed a portal application which contains responsive design CSS. The responsive breakpoints don't seem to apply when using a mobile device, or when using the device toolbar in Chrome to simulate this.
The screenshots below show the desired behavior when shrinking the viewport of a desktop browser:
1053 width - well away from breakpoint
771 width - just outside of 768 breakpoint
767 width - just within breakpoint and single-column view showing
575 width - well within breakpoint, single-column view showing
These four screens show the behavior we need to see, with the leftmost panel disappearing and the rightmost panel taking up the entire viewport below 768 screen width, but this only works on desktop browsers. Mobile behavior is shown with the device toolbar enabled:
1053 mobile - design looks similar
771 mobile - 100% and no auto-zoom enabled
767 mobile - inside breakpoint, but zoom is already happening
575 mobile - well inside breakpoint, site zoomed rather than responsive
Can anyone help me identify why the responsive CSS that works fine on the desktop does not activate for identical aperture widths on mobile? Is this a user agent issue?
responsive-design viewport user-agent mobile-website
asked Nov 25 '18 at 18:46
R ReunR Reun
12
I'm part of a team that has developed a portal application which contains responsive design CSS. The responsive breakpoints don't seem to apply when using a mobile device, or when using the device toolbar in Chrome to simulate this.
The screenshots below show the desired behavior when shrinking the viewport of a desktop browser:
1053 width - well away from breakpoint
771 width - just outside of 768 breakpoint
767 width - just within breakpoint and single-column view showing
575 width - well within breakpoint, single-column view showing
These four screens show the behavior we need to see, with the leftmost panel disappearing and the rightmost panel taking up the entire viewport below 768 screen width, but this only works on desktop browsers. Mobile behavior is shown with the device toolbar enabled:
1053 mobile - design looks similar
771 mobile - 100% and no auto-zoom enabled
767 mobile - inside breakpoint, but zoom is already happening
575 mobile - well inside breakpoint, site zoomed rather than responsive
Can anyone help me identify why the responsive CSS that works fine on the desktop does not activate for identical aperture widths on mobile? Is this a user agent issue?
responsive-design viewport user-agent mobile-website
responsive-design viewport user-agent mobile-website
asked Nov 25 '18 at 18:46
R ReunR Reun
12
asked Nov 25 '18 at 18:46
R ReunR Reun
12
asked Nov 25 '18 at 18:46
R ReunR Reun
12
asked Nov 25 '18 at 18:46
R ReunR Reun
12
asked Nov 25 '18 at 18:46
R ReunR Reun
12
12
add a comment |
add a comment |
0
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%2f53470741%2fmobile-user-agent-causes-responsive-design-not-to-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
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.
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%2f53470741%2fmobile-user-agent-causes-responsive-design-not-to-work%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
