window.innerWidth - workaround for when it returns the wrong value
$begingroup$
- Some JavaScript libraries relies on window
innerWidthandinnerHeightto do their calculations
window.innerWidthis not 100% reliable, which may lead to bugs
matchMedia().matchesis 100% accurate but it returns a boolean value- come around: use
matchMediato verifywindow.innerWidthvalue; if it returns false usematchMediato do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth. In cases where I had some media queries the return value of window.innerWidth used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia.
I created a function getCorrectDimension that performs a binary search around the window innerWidth (or innerHeight) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end) {
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`(${dim}: ${guess}px)`).matches) {
return guess
}
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-${dim}: ${guess}px)`).matches
? bin(guess, end)
: bin(start, guess)
}
const getCorrectDimension = (dim = 'width', range = 300) => {
if(dim !== 'width' && dim !== 'height') {
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
}
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`(${dim}: ${window[prop]}px)`).matches) {
return window[prop]
}
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
}
javascript dom
edited 54 mins ago
Jamal♦
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
- Some JavaScript libraries relies on window
innerWidthandinnerHeightto do their calculations
window.innerWidthis not 100% reliable, which may lead to bugs
matchMedia().matchesis 100% accurate but it returns a boolean value- come around: use
matchMediato verifywindow.innerWidthvalue; if it returns false usematchMediato do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth. In cases where I had some media queries the return value of window.innerWidth used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia.
I created a function getCorrectDimension that performs a binary search around the window innerWidth (or innerHeight) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end) {
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`(${dim}: ${guess}px)`).matches) {
return guess
}
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-${dim}: ${guess}px)`).matches
? bin(guess, end)
: bin(start, guess)
}
const getCorrectDimension = (dim = 'width', range = 300) => {
if(dim !== 'width' && dim !== 'height') {
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
}
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`(${dim}: ${window[prop]}px)`).matches) {
return window[prop]
}
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
}
javascript dom
edited 54 mins ago
Jamal♦
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
- Some JavaScript libraries relies on window
innerWidthandinnerHeightto do their calculations
window.innerWidthis not 100% reliable, which may lead to bugs
matchMedia().matchesis 100% accurate but it returns a boolean value- come around: use
matchMediato verifywindow.innerWidthvalue; if it returns false usematchMediato do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth. In cases where I had some media queries the return value of window.innerWidth used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia.
I created a function getCorrectDimension that performs a binary search around the window innerWidth (or innerHeight) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end) {
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`(${dim}: ${guess}px)`).matches) {
return guess
}
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-${dim}: ${guess}px)`).matches
? bin(guess, end)
: bin(start, guess)
}
const getCorrectDimension = (dim = 'width', range = 300) => {
if(dim !== 'width' && dim !== 'height') {
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
}
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`(${dim}: ${window[prop]}px)`).matches) {
return window[prop]
}
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
}
javascript dom
edited 54 mins ago
Jamal♦
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
- Some JavaScript libraries relies on window
innerWidthandinnerHeightto do their calculations
window.innerWidthis not 100% reliable, which may lead to bugs
matchMedia().matchesis 100% accurate but it returns a boolean value- come around: use
matchMediato verifywindow.innerWidthvalue; if it returns false usematchMediato do a binary search until it finds the correct value
I faced that issue with some libs that relies on window.innerWidth. In cases where I had some media queries the return value of window.innerWidth used by the library would be off and that library would have issues with incorrect value.
I've seen that matchMedia().matches always return the correct value, but it returns a boolean value, not the width value. I've not seen a solution so far for that (maybe some of you know a better solution?), so I came up with a solution using matchMedia.
I created a function getCorrectDimension that performs a binary search around the window innerWidth (or innerHeight) to find the correct value if its value is wrong as you can see below:
const binarySearch = dim => function bin(start, end) {
const guess = Math.floor((start + end)/2)
// this checks if we have the correct value, if not it will keep calling itself until there's a match
if(window.matchMedia(`(${dim}: ${guess}px)`).matches) {
return guess
}
// since it is not a match, then we need to recalibrate the range and call again.
// for that we check the boolean value using with min-width (height) rule.
return window.matchMedia(`(min-${dim}: ${guess}px)`).matches
? bin(guess, end)
: bin(start, guess)
}
const getCorrectDimension = (dim = 'width', range = 300) => {
if(dim !== 'width' && dim !== 'height') {
throw Error('`getCorrectDimension` accepts "width" or "height" as parameter')
}
let prop = 'inner' + dim.charAt(0).toUpperCase() + dim.slice(1)
// here checks if the window.innerWidth or Height it's the correct one
if(window.matchMedia(`(${dim}: ${window[prop]}px)`).matches) {
return window[prop]
}
// here, since the value is wrong we use binarySearch to find its correct value
const start = window[prop] - range >= 0 ? window[prop] - range : 0
const end = window[prop] + range
return binarySearch(dim)(start, end)
}
javascript dom
javascript dom
edited 54 mins ago
Jamal♦
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 54 mins ago
Jamal♦
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 54 mins ago
Jamal♦
30.3k11119227
edited 54 mins ago
Jamal♦
30.3k11119227
edited 54 mins ago
Jamal♦
30.3k11119227
30.3k11119227
asked 6 hours ago
buzattobuzatto
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 6 hours ago
buzattobuzatto
1
asked 6 hours ago
buzattobuzatto
1
1
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
buzatto is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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
});
}
});
buzatto is a new contributor. Be nice, and check out our Code of Conduct.
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%2fcodereview.stackexchange.com%2fquestions%2f213760%2fwindow-innerwidth-workaround-for-when-it-returns-the-wrong-value%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
buzatto is a new contributor. Be nice, and check out our Code of Conduct.
buzatto is a new contributor. Be nice, and check out our Code of Conduct.
buzatto is a new contributor. Be nice, and check out our Code of Conduct.
buzatto is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
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%2fcodereview.stackexchange.com%2fquestions%2f213760%2fwindow-innerwidth-workaround-for-when-it-returns-the-wrong-value%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
