5

I'm encountering a strange bug that I'm having a hard time describing...

I'm working on an HTML5 Canvas application when it started behaving oddly when served from my localhost server. I discovered that window.innerWidth and window.innerHeight were suddenly being reported incorrectly in both Firefox and Chrome. innerWidth should be 1366 on this machine but is being reported at 1525 in Firefox and 2048 in Chrome.

I thought it might be a strange glitch in my javascript, but I found that this is now affecting all pages viewed from localhost and is messing with the css in some older applications.

The strange part is that everything works as expected when viewed from 127.0.0.1. We've also found that this same problem happens when my boss views the app when served from a public Dropbox folder and viewed on his computer in Firefox (Chrome works fine). Served locally on that computer shows no issues however.

This one has me completely stumped. I'm hoping someone has an idea of a possible cause or a way to track down the issue since we can't allow this to happen to customers using the app.

Edit: some more numbers

window.innerWidth: 2048
window.outerWidth: 1366
screen.width: 1366
window.screen.availWidth: 1366

innerWidth is the only one that's wrong, and it's unrelated to the page content as these values remain the same even when opening blank files.

  • There was another post that discussed these two checks. alert(window.screen.availWidth); alert(window.screen.availHeight); http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa – Frank Tudor Mar 17 '14 at 14:33
  • It might shed some light to set some incremental breaks and run the two checks against your width and height variables. – Frank Tudor Mar 17 '14 at 14:35
  • Thanks Frank, was good to check but unfortunately I haven't been able to glean much from it. –  Mar 17 '14 at 15:20
  • I have the same issue, `127.0.0.1` works though... Very weird. Thank you. – mqklin Jul 21 '17 at 09:44
  • 5 years and 7 month later.. I have the same issue with localhost – Armin Masoomi Oct 29 '19 at 22:08
  • I have the same issue guys. Any fix on this? – Janaka Mar 14 '22 at 06:12

2 Answers2

0

Something to keep in mind that i experienced recently is that innerWidth is dependant on the zoom option in the browser window. And e.g. for chrome this happens to be saved in some occasions for specific URLs. So i had the case that for a localhost URL it was 100% while it was 125% for the production URL keeping me confused. Maybe check your browser zoom setting.

user2656286
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31860083) – Sumit Sharma May 28 '22 at 17:55
-1

Can u use following code

var screen = {width:$(window).width(), height:$(window).height()};
Saravanan
  • 13
  • 1