iOS innerWidth innerHeight don't match Apple's documentation
I'm trying to figure out what the actual resolution of an iPhone 6/7/8 is. According to Apple's docs they should all be 375 x 667, but when I run console.log(window.innerWidth, window.innerHeight) in my Cordova app, it prints 320 548. Here is my viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Which if I understand correctly should set the webview's viewport to match the device's viewport.
The iPhone 6/7/8 simulators also doesn't seem to match Chrome's dev tools mobile preset "iPhone 6/7/8".
Also strangely, when I initially added the viewport meta tag, the app was rendering perfectly in the simulator. It appeared to be rendering at 375x667, but after rebuilding a couple times it switched back to rendering incorrectly (despite the fact that I didn't make any source changes). I'd chalk this up to me going insane, but it wouldn't be the first time I've come across non-deterministic behavior while dealing with iOS/xcode.
What is happening here? Where does the resolution 320x548 come from?
javascript html ios cordova
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
add a comment |
I'm trying to figure out what the actual resolution of an iPhone 6/7/8 is. According to Apple's docs they should all be 375 x 667, but when I run console.log(window.innerWidth, window.innerHeight) in my Cordova app, it prints 320 548. Here is my viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Which if I understand correctly should set the webview's viewport to match the device's viewport.
The iPhone 6/7/8 simulators also doesn't seem to match Chrome's dev tools mobile preset "iPhone 6/7/8".
Also strangely, when I initially added the viewport meta tag, the app was rendering perfectly in the simulator. It appeared to be rendering at 375x667, but after rebuilding a couple times it switched back to rendering incorrectly (despite the fact that I didn't make any source changes). I'd chalk this up to me going insane, but it wouldn't be the first time I've come across non-deterministic behavior while dealing with iOS/xcode.
What is happening here? Where does the resolution 320x548 come from?
javascript html ios cordova
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
1
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56
add a comment |
I'm trying to figure out what the actual resolution of an iPhone 6/7/8 is. According to Apple's docs they should all be 375 x 667, but when I run console.log(window.innerWidth, window.innerHeight) in my Cordova app, it prints 320 548. Here is my viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Which if I understand correctly should set the webview's viewport to match the device's viewport.
The iPhone 6/7/8 simulators also doesn't seem to match Chrome's dev tools mobile preset "iPhone 6/7/8".
Also strangely, when I initially added the viewport meta tag, the app was rendering perfectly in the simulator. It appeared to be rendering at 375x667, but after rebuilding a couple times it switched back to rendering incorrectly (despite the fact that I didn't make any source changes). I'd chalk this up to me going insane, but it wouldn't be the first time I've come across non-deterministic behavior while dealing with iOS/xcode.
What is happening here? Where does the resolution 320x548 come from?
javascript html ios cordova
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
I'm trying to figure out what the actual resolution of an iPhone 6/7/8 is. According to Apple's docs they should all be 375 x 667, but when I run console.log(window.innerWidth, window.innerHeight) in my Cordova app, it prints 320 548. Here is my viewport meta tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Which if I understand correctly should set the webview's viewport to match the device's viewport.
The iPhone 6/7/8 simulators also doesn't seem to match Chrome's dev tools mobile preset "iPhone 6/7/8".
Also strangely, when I initially added the viewport meta tag, the app was rendering perfectly in the simulator. It appeared to be rendering at 375x667, but after rebuilding a couple times it switched back to rendering incorrectly (despite the fact that I didn't make any source changes). I'd chalk this up to me going insane, but it wouldn't be the first time I've come across non-deterministic behavior while dealing with iOS/xcode.
What is happening here? Where does the resolution 320x548 come from?
javascript html ios cordova
javascript html ios cordova
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
asked Nov 14 '18 at 18:58
SimpleJSimpleJ
5,94742246
5,94742246
1
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56
add a comment |
1
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56
1
1
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56
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%2f53307043%2fios-innerwidth-innerheight-dont-match-apples-documentation%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%2f53307043%2fios-innerwidth-innerheight-dont-match-apples-documentation%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
1
It might be that the Display Zoom feature is turned on, which causes the display to have the logical resolution of 320x568 (it’s 320x548 without the height of the status bar).
– Tamás Sengel
Nov 15 '18 at 0:56