What is chrome's viewport size in 1366x768 resolution screens? Any link suggestions where I can find a coverter for this?
Related
I have a responsive website which behaves properly on different screen sizes. On a desktop browser, when I zoom in (making the viewport smaller) or out (making the viewport larger), the layout renders properly on the adjusted viewport.
However, when I pinch zoom in on the mobile device, it seems that the viewport size doesn't change, that I still need to scroll horizontally to view the content, and I can't pinch zoom out to increase the viewport size at all.
What should I write in my HTML or CSS in order to make the viewport size change while pinch zooming in or out on the mobile screen, such that the physical viewport is always equals to the screen size no matter the zoom ratio?
Given the following:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img
src="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg"
alt="Mars Curiosity Rover takes an excellent selfie."
srcset="
https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-large.jpg 1120w,
https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg 720w,
https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-small.jpg 400w"
sizes="(max-width: 400px) 400px, (max-width: 720px) 720px, (max-width: 1120px) 1120px"
>
</body>
</html>
I'd expect the image chosen by the browser to be small, medium then large when viewed on devices with viewport widths 400px, 720px and 1120px respectively. This is indeed the behaviour when testing in a desktop browser (dragging the window, refreshing the page), however this isn't the case when viewing the page with a real mobile device (iOS 14+). I have also tested this using Chrome DevTools in the device toolbar. Instead, the largest image is loaded in all cases. I checked the viewport width in the console, pictured in the image below.
Image when viewed on mobile device and when using Chrome DevTools device toolbar.
Image when viewed in Chrome on desktop, simply resizing the window.
Is my understanding of srcset wrong? Could there be some issue elsewhere?
You need to be wary of the pixel density ratio. Iphones have a retina display with a 2x pixel density ratio (so a 1200px image is used for a 600px width).
Checkout How to use srcset and sizes for responsive images
I found a good article explains the concept of view port:
https://www.quirksmode.org/mobile/viewports.html
But I'm still a little bit confused with the differences between window size and viewport size,
Window Size:
Viewport Size:
aren't they the same thing?
Another way to say what Kateryna S. mentioned is that the viewport renders differently depending on the size of your device. For example let's say you made a responsive web app using material design that through the grid system looks one way on your desktop browser and one way on your mobile device. The Mobile device has a much smaller viewport and will render the site using the smaller grid.
For example, if you look at material design and resize your browser you will see how it will look on different viewports. If you resize your browser to the smallest size that mimic basically what you would see on your mobile device.
https://material.io/design/components/cards.html#usage
The window is just your browser view and is not related to other devices.
A viewport is the area that is visible to you on your device. A window is your browser window. The window can be as big as the viewport or smaller.
What is my phone real resolution? The resolution that CSS detects.
The phone is a Samsung S6. Its factory specifications show a resolution of 1440px x 2560px.
How ever when I use css #media(max-width:...px) to detect the screen resolution, the mobile browser acts as if it's somewhere between 768px and 991px width.
Using Google chrome inspection tool and toggling to mobile view, it shows that a Samsung S5 has a resolution of 360px x 640px.
So where is the real resolution in all of this?
Screen size and screen resolution are NOT the same. You seem to be confusing the two.
Google's web developer tools detect the screen size (as in the width of the screen) as opposed to the screen resolution.
Screen resolution refers to the clarity of the text and images displayed on your screen.
At higher resolutions, such as 1600 x 1200 pixels, items appear sharper.
To summarise; the google inspection tool picks up the physical screen size of devices and emulates them, it does not emulate the screen resolution which is essentially the quality of the output of text/images.
The accepted answer seems to be incorrect.
#OP here's what you need to know:
Screen size is the physical size of the screen, and is measured in inches.
Screen resolution is the number of pixels making up the screen, and is measured in pixels.
Your phone has a resolution of 1440x2560, as stated in the spec sheet.
So why does CSS act like the resolution is lower? It's because the contents of the screen that you are seeing on your mobile device are zoomed in.
This is done because showing text etc. at 100% size on a 1440x2560 display that is only ~6 inches would make the text so tiny as to be illegible.
So, if the amount of zoom is 200%, CSS thinks the screen is 720x1280. If 400% (as seems to be the case with your phone), CSS thinks 360x640. And so on...
Webpage: www.mathias-syversen.net
Hello, this is my first post, so be kind!
I am trying to make a mobile friendly web page using #media queries to detect screen size and device.
Problem is, if I get the query to work with the mobile, it also applies to the desktop version. Probably because the max / min width is too large, to compensate for the new smartphones with high resolution.
#media only screen and (min-device-width: 420px) and (max-device-width : 768px)
Only works for iPad, but not for desktop or android mobile.
Have tried uncountable combinations of max and min screen width, and each time it works on the mobile (android) it also applies to the desktop.
If I try to detect pixel ratio, it works on the smartphone, but also applies to desktop (at least on OS X, probably because it has a retina display)
What I want is an easy way to just determine if the device is NOT a desktop, and apply the proper css, regardless if its android, iOS, phone or tablet.
#media screen and (max-width: 800px), (max-device-width: 480px), (max-device-width: 768px) {}
Now works on desktop > 800px, Tablet and mobile. As far as I have tested, this seams to dove my problem.
I should point out I'm learning reponsive too, so I may not be 100% right.
Viewport and pixel resolution (on mobile devices) are not the same. Consider loading a standard 960px web page on your mobile phone. You can see it all, but if you consider the iPhone does not have 960 pixels in width (portrait); it's resolution is either 320 (iPhone 3, 3G, 3GS) or 640 (4 and up). So why do you see the whole page? It scales, or zooms out of the page to fit it in the viewport. On the iPhone its default width is 980px, hence why pages based on the 960px grid system look fine, you don't need to scroll horizontally, you've even got 10px either side of margin.
So, the default viewport width size is 980px, but the native resolution width is either 320px or 640px depending on the phone model. To add further complexity all iPhones use the same viewport width of 320px. When a page loads and it doesn't cater for mobile devices you're essentially viewing 3 x zoomed out (980 / 320).
Note, by default a mobile device will scale out to its maximum - you can't scale or zoom out anymore. Using the iPhone example you couldn't zoom out beyond 980px. If the page extends beyond 980px you would need to scroll the page horizontally.
If you're looking at a page in default size (980px) and you zoom in on a portion of that page (you could be zooming in to scale at 100%) you're only going to see a section of that page.
Considering mobile devices, unless the webpage you're viewing contains the meta tag below in the head section, it will zoom / scale out of it's default viewport size.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser that the width of its window should be equal to the device's native viewport width (note, this is not necessarily the same as the native resolution width) and it should scale at 1, or 100%.
I suggest you have a look at Viewport Sizes to reference the device you want to target.
According to the website the Galaxy S4's viewport's dimensions are 360 x 640.
Proof of concept
Create a div, set up 2 styles:
Background colour blue
Background colour red with a max width of 360px
View the page on the S4 in portrait and landscape. The div should change colour; in portrait it should be red, landscape it should be blue.
Make sure you include the meta tag above in the head of the document.
From the research around I've done, it's far easier to find native viewport sizes on devices - i.e. when you're looking at the browser window at a scale of 1 / 100%. Finding the default viewport size on devices is harder, but thankfully when you're designing for mobile, it's the native viewport size you'll be most concerned with.
#media only screen and (min-device-width: 420px) and (max-device-width : 768px) Only works for iPad, but not for desktop or android mobile.
This means that it's work on devices which got their resolution beween 420 and 768px, so it wont apply to devices which got lower or higher resolutions than this. If you have web developer tools installed on mozilla press Ctrl+Shift+M and try to resize the window, there you can see the actual resolution on it, if it doesn't apply there in this scale of resolution (420 -> 768), it should be a CSS error, try to validate your code.
PS:Hope i get your question correct.
You have to really identify which breakpoints you want to use. I would suggest if you use (max-width:959px) this will include from mobile to tablet landscaped and very small res little computers. Then (min-width:960px) this is you breakpoint from laptop to desktop. Identifying which breakpoints in the beginning is very important in media query because this can get overwhelming in the end.
/** this is for mobile to little laptops res**/
#media only screen and (max-width:959px) {
}
/** this is for little laptops res to desktop**/
#media only screen and (min-width:960px) {
}