Browsers

Question

Why doesn’t my code match other websites when I look up my width and my height of my browser?

https://code.sololearn.com/W6oNpHmkdVrc/?ref=app

Answer 1

In this case, you don't need onload.

I hope my code helps in understanding the sizes:
https://code.sololearn.com/Wu7D6rBUIqmy/?ref=app

Answer 2

The DOM structure was not completely loaded when you try to change width_height.innerHTML property.

More about this here ...

https://www.sololearn.com/post/90825/?ref=app

Answer 3

So should i put the script at try the end of the body tag? Ipang

Answer 4

It is an option yes, but you can work around this by wrapping your JS code inside a "window.load" event handler.

window.onload = () =>
{
// move your JS code here ...
}

Answer 5

Could it also be because of my meta viewport does it matter if i add in a content(height=device-height)?

Answer 6

Nope, that meta has nothing to do with this. I think it's more closely related to how the page be displayed, in terms of responsiveness, like how adaptive it is when being displayed in various device screen size.

Answer 7

Yea, thats kind of the point, it works bow but only the first time which is the problem

Answer 8

BTW ... you can have that code inside JS section. No need to put it within a script block inside HTML section.

Answer 9

Your Mom,
I have posted a question in regards to screen orientation changes. If you want the code to also update when the screen orientation changes, and if you're interested, Solomoni Railoa helped me out with an example there.

https://www.sololearn.com/Discuss/2979507/?ref=app

Answer 10

Okay, but why whenever you click the run button multiple times it changed your screen size and width? Ipang Solo
And its only my height thats changing not my width

Answer 11

Don't know exactly what you mean It's not happening for me, in the updated code screen size and orientation shows up correctly. I test ran it many times.

https://code.sololearn.com/WRTsbf87IS4u/?ref=app

Answer 12

window.innerHeight shows the actual size of the window when the application was loaded, that is, if you performed some manipulations with the code using the keyboard and launched the application, then the window size will be equal to the screen size minus the keyboard size minus the SoloLearn top field size.

You can check this in my code: "measure the centimeter indicated there with a ruler and if it is true, then you can safely measure all visible fields and check with the number of pixels."

I also recommend uncommenting the lines in css one by one and see what happens.

Answer 13

What exactly? ☺️
Are you about the sizes you indicated?
So I don’t know the dimensions of your device and the manipulations that you carry out.
It's up to you to tell me whether it works or not ☺️

Answer 14

David Dolejší, the value of initial-scale depends on the individual settings of the user device, for example, the code I did for my device works perfectly, but for you there may be an error of 0.54, since I have initial-scale = 1.54

Answer 15

Like the height will keep going to 553 or 448 and 1024

Answer 16

So it is working? Solo

Answer 17

Better to not onload from inline scripting..for some reason onload does not run well with incompatiable browsers which you should take into consideration. Alot of people do not update their devices regularly so as devs we have to create scripts to help make incompatible devices load the content in the perfered manner.