Understanding orientation, aspect ratio and CSS pixels on mobile devicesMaintain the aspect ratio of a div with CSSWhat is the best way to detect a mobile device in jQuery?CSS force image resize and keep aspect ratioCSS scale several images to fit viewport keeping aspect ratioMaintain aspect ratio according to width and heightImage gallery on mobile devicesAccess to hardware pixels on mobile devicesHow to detect aspect ratio of an image in cssCSS fails when changing device orientationMaintain portrait aspect ratio on div using css
Global amount of publications over time
How do I extrude a face to a single vertex
Varistor? Purpose and principle
Why has "pence" been used in this sentence, not "pences"?
Visiting the UK as unmarried couple
Is XSS in canonical link possible?
When quoting, must I also copy hyphens used to divide words that continue on the next line?
Is there a conventional notation or name for the slip angle?
Are lightweight LN wallets vulnerable to transaction withholding?
Is there a word to describe the feeling of being transfixed out of horror?
THT: What is a squared annular “ring”?
Proof of Lemma: Every nonzero integer can be written as a product of primes
On a tidally locked planet, would time be quantized?
A Permanent Norse Presence in America
Should I install hardwood flooring or cabinets first?
How must one send away the mother bird?
Why do IPv6 unique local addresses have to have a /48 prefix?
Transformation of random variables and joint distributions
Proving a function is onto where f(x)=|x|.
List of people who lose a child in תנ"ך
Freedom of speech and where it applies
Have I saved too much for retirement so far?
How will losing mobility of one hand affect my career as a programmer?
Why is Arduino resetting while driving motors?
Understanding orientation, aspect ratio and CSS pixels on mobile devices
Maintain the aspect ratio of a div with CSSWhat is the best way to detect a mobile device in jQuery?CSS force image resize and keep aspect ratioCSS scale several images to fit viewport keeping aspect ratioMaintain aspect ratio according to width and heightImage gallery on mobile devicesAccess to hardware pixels on mobile devicesHow to detect aspect ratio of an image in cssCSS fails when changing device orientationMaintain portrait aspect ratio on div using css
For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?
I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.
Portrait Mode
In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.
When I use the following CSS...
html
height: 100vh;
width: 100vw;
body
height: 100%;
width: 100%;
margin: 0;
... Chrome Development Tools reports that the size of the body is 980 x 1546.
Landscape Mode
In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.
However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.
A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.
It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.
EDIT:
To reply to @Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.
In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.
javascript css mobile screen-orientation aspect-ratio
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
add a comment |
For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?
I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.
Portrait Mode
In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.
When I use the following CSS...
html
height: 100vh;
width: 100vw;
body
height: 100%;
width: 100%;
margin: 0;
... Chrome Development Tools reports that the size of the body is 980 x 1546.
Landscape Mode
In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.
However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.
A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.
It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.
EDIT:
To reply to @Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.
In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.
javascript css mobile screen-orientation aspect-ratio
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16
add a comment |
For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?
I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.
Portrait Mode
In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.
When I use the following CSS...
html
height: 100vh;
width: 100vw;
body
height: 100%;
width: 100%;
margin: 0;
... Chrome Development Tools reports that the size of the body is 980 x 1546.
Landscape Mode
In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.
However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.
A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.
It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.
EDIT:
To reply to @Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.
In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.
javascript css mobile screen-orientation aspect-ratio
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?
I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.
Portrait Mode
In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.
When I use the following CSS...
html
height: 100vh;
width: 100vw;
body
height: 100%;
width: 100%;
margin: 0;
... Chrome Development Tools reports that the size of the body is 980 x 1546.
Landscape Mode
In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.
However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.
A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.
It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.
EDIT:
To reply to @Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.
In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.
javascript css mobile screen-orientation aspect-ratio
javascript css mobile screen-orientation aspect-ratio
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
edited Mar 7 at 19:27
James Newton
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
asked Mar 7 at 9:11
James NewtonJames Newton
2,69143169
2,69143169
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16
add a comment |
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16
add a comment |
1 Answer
1
active
oldest
votes
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
answered Mar 7 at 21:17
JustAClueJustAClue
663
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%2f55039955%2funderstanding-orientation-aspect-ratio-and-css-pixels-on-mobile-devices%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
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
answered Mar 7 at 21:17
JustAClueJustAClue
663
add a comment |
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
answered Mar 7 at 21:17
JustAClueJustAClue
663
add a comment |
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
answered Mar 7 at 21:17
JustAClueJustAClue
663
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
answered Mar 7 at 21:17
JustAClueJustAClue
663
answered Mar 7 at 21:17
JustAClueJustAClue
663
answered Mar 7 at 21:17
JustAClueJustAClue
663
answered Mar 7 at 21:17
JustAClueJustAClue
663
663
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%2f55039955%2funderstanding-orientation-aspect-ratio-and-css-pixels-on-mobile-devices%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
“My aim is to get the <main> element to fill the available screen space completely in both portrait and landscape modes.” - and how exactly would 100 vw and vh not already achieve this? I don’t get what’s with all the “JS measures this, JS measures that …” here, how is that supposed to be relevant to anything in regard to your stated goal.
– 04FS
Mar 7 at 9:16
And you haven't even began with iOS dimensions yet! By the way, have you configured any viewport meta tag, and if yes, how is it set?
– Kaddath
Mar 7 at 9:16