Website not scaling correctly unless using developer tools
I have a web app with many animations that need to remain unchanged. So to make the site responsive I have been using the following code:
@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>(Best to view snippet in full page)
When the browser is normally displaying the code and I resize it, nothing happens, but when I go into developer tools and use the mobile responsive version, all of a sudden the scaling is working.
What is causing this?
html css media-queries
asked Nov 14 '18 at 4:15
user9951515user9951515
113
add a comment |
I have a web app with many animations that need to remain unchanged. So to make the site responsive I have been using the following code:
@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>(Best to view snippet in full page)
When the browser is normally displaying the code and I resize it, nothing happens, but when I go into developer tools and use the mobile responsive version, all of a sudden the scaling is working.
What is causing this?
html css media-queries
asked Nov 14 '18 at 4:15
user9951515user9951515
113
add a comment |
I have a web app with many animations that need to remain unchanged. So to make the site responsive I have been using the following code:
@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>(Best to view snippet in full page)
When the browser is normally displaying the code and I resize it, nothing happens, but when I go into developer tools and use the mobile responsive version, all of a sudden the scaling is working.
What is causing this?
html css media-queries
asked Nov 14 '18 at 4:15
user9951515user9951515
113
I have a web app with many animations that need to remain unchanged. So to make the site responsive I have been using the following code:
@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>(Best to view snippet in full page)
When the browser is normally displaying the code and I resize it, nothing happens, but when I go into developer tools and use the mobile responsive version, all of a sudden the scaling is working.
What is causing this?
@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>@media all and (max-width: 1280px) and (max-height: 720px)
html
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
<div style="width: 700px; height: 700px; background-color: green;"></div>html css media-queries
html css media-queries
asked Nov 14 '18 at 4:15
user9951515user9951515
113
asked Nov 14 '18 at 4:15
user9951515user9951515
113
asked Nov 14 '18 at 4:15
user9951515user9951515
113
asked Nov 14 '18 at 4:15
user9951515user9951515
113
asked Nov 14 '18 at 4:15
user9951515user9951515
113
113
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It happens because the media query detects the size of the screen, not the size of the viewport/browser window. If you go to Dev Tools and resize it, it modifies the query's view of the screen, and makes the code think the screen is a mobile size. Resizing the browser window doesn't have this effect.
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
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%2f53293112%2fwebsite-not-scaling-correctly-unless-using-developer-tools%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It happens because the media query detects the size of the screen, not the size of the viewport/browser window. If you go to Dev Tools and resize it, it modifies the query's view of the screen, and makes the code think the screen is a mobile size. Resizing the browser window doesn't have this effect.
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
add a comment |
It happens because the media query detects the size of the screen, not the size of the viewport/browser window. If you go to Dev Tools and resize it, it modifies the query's view of the screen, and makes the code think the screen is a mobile size. Resizing the browser window doesn't have this effect.
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
add a comment |
It happens because the media query detects the size of the screen, not the size of the viewport/browser window. If you go to Dev Tools and resize it, it modifies the query's view of the screen, and makes the code think the screen is a mobile size. Resizing the browser window doesn't have this effect.
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
It happens because the media query detects the size of the screen, not the size of the viewport/browser window. If you go to Dev Tools and resize it, it modifies the query's view of the screen, and makes the code think the screen is a mobile size. Resizing the browser window doesn't have this effect.
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
answered Nov 14 '18 at 4:25
Jack BashfordJack Bashford
7,56131438
7,56131438
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
add a comment |
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
Thank you for that explanation, I understand now. Is there a way to do it so that it is based on the browser width? (without having to use values like 100vw/100vh for each individual element). Just a global scale of the page
– user9951515
Nov 14 '18 at 4:32
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%2f53293112%2fwebsite-not-scaling-correctly-unless-using-developer-tools%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
