CODEWITHSUNDEEP
csshtmlviewport
Saix
Saix

Reputation: 113

Viewport - How does the browser makes 1080px to 414px, for example

EDIT: Because I maybe wasn't clear enough. I'd like to point out I'm NOT searching for "how to use viewport". I'd like to know how that actually works on background. How is the actual number of the viewport width computed on mobile device etc.

For example my smartphone has the smaller size 1080px but it returns 414 instead. Actually not just the viewport, also simple $(window).width() returns only 414. Please read the rest I wrote before those two paragraphs. Thank you.

I also changed the title to somewhat more explicit, but you still need the read the rest. Thank you.

I'm getting familiar with using the viewport, yet I still can't see how it actually works on background. If you read viewport dimension on smartphone with HD resolution, browser returns you viewport width way under 1920 or 1080 which is the actual phone's screen resolution.

1) How does the browser come up with those numbers? Is it detecting mobile device at general or mobile device is giving the browser actual screen size (real-life screen size)?

2) How does the browser differs between smartphone and much bigger tablet, if they both have the same resolution?

3) Media queries and other stuff relies on certain breakpoints. Those are actually hard written values in every responsive design. Usually something like 480 and 768px. Is that something I can also rely to be constant? No matter how far will the screen resolution go up on smartphones in the future? I mean like 4k on 5" screen.

4) How does PC screen fits to all this? Browser doesn't detect mobile device? or machine won't give it actual screen size? How does it know it just should use the pixels as pixels (minus scrollbars etc.)?

Upvotes: 0

Views: 862

Answers (1)

Kamal Kumar
Kamal Kumar

Reputation: 228

@Saix, Have you searched out what you actually want? You will get your answer on first search.

Here, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages or a common Header file under the <head> tag.

HTML

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

Upvotes: 1

Related Questions