Mobile Screen

Asked 2 weeks ago, Updated 2 weeks ago, 2 views

I want to measure the screen that is checked on mobile.

I mean... Even if it's the same page, some pages look normal on the desktop, but sometimes the left and right sides are cut off on the mobile.

I want to measure the case where the left and right sides are cut like this.

According to an article I saw somewhere, the left and right widths are fixed to a certain size on mobile. I thought it was actually right, so I tried to measure it, but even if I connected it with a mobile device, the actual left and right widths were not constant and all were different.

If you connect to a device with a different resolution, I want to configure the css with the optimal size, but I want to set the width that is the standard.

.

The following command measured the width of the open screen, and the width was different for each mobile device.

Could you point out what I'm wrong about the above?

window.innerWidth

html javascript

2022-09-20 10:23

1 Answers

Each mobile device had a different width.

It's so obvious. It's an open secret that the iPhone has different screen sizes, resolutions, and unavailable areas depending on each generation or Pro/SE. What you're facing in the first place is the Beaufort issue. The Mozilla document refers to this problem as "Pixels are not pixels". Please read it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

If you connect to a device with a different resolution, I want to configure css with the best size for it.

If you look at the linked article above, you will see this meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

Let's put this in and fix the pixel magnification for all the devices. That way, you can easily optimize by device width.

I'm going to decide the width that is the standard.

This is the tricky part Generally, mobile devices are considered to have a screen width of less than 768px. Next is a tablet device, then a laptop... It's like that. Go to media query breakpoints to follow best practices or learn about CSS frameworks such as Bootstrap.

I want to measure the screen that is checked on the mobile. (...) I want to measure the case where the left and right sides are cut like this.

You can check this by adjusting the size of the browser window on your computer. As long as it is not adaptive, that much emulation is sufficient. You can actually do mobile device emulation through the browser's developer tools.

Could you point out what I'm wrong about the above?

I don't think there's anything in particular.


2022-09-20 10:23

If you have any answers or tips


© 2022 pinfo. All rights reserved.