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...
Related
I'm new to the world of web design and I've started with HTML and CSS. I've begun by building my own website from scratch and I'm currently stumped with how the design scales across different platforms.
When viewing my website on an iPhone 7, which is listed online as having a resolution of 750 x 1334, my inline-block images are able to sit next to one another in rows of 2. I don't understand how this is possible when they are set to have a height and width of 400px. I've attached a developer screenshot from chrome dev tools to show further. Developer tools showing the issue
Do I have a misunderstanding of how iPhones display content? If the maximum width resolution is 750px (and only 375px according to chrome dev tool...) how is it able to display 2 400px images side by side?
iPhones have "Retina display" which have a higher screen resolution than the "logical" resolution that you see in dev tools.
The image (content of the whole screen) is first rasterized, after that downsampled to the screen resolution and then displayed on the physical screen.
For the iPhone 7 model (and 6 and 8) scale factor is 2.
These models have screen resolution of 750x1334 and logical resolution of 375x667.
You can find resolutions for other models here and more details here.
As for the 2 images with width of 400px displaying on the 375px with screen side by side seems like a viewport zoom "issue".
The of the html is not visible on the screenshot, but the "jumbotron" class on the suggests that you used bootstrap. Perhaps you have unintentionally set the viewport when you where setting up bootstrap.
My page has a width of 1920px on the body element. My 15" Macbook Pro supposedly has a resolution of 2880x1800. Why do I need to zoom out to see the entire page?
The pixel density of many modern screens is very high. If you viewed content intended for more traditional screens on them using native pixel resolution, you would end up with pin sharp text that was too small for most people to read.
Macbook Retina displays are, by default, scaled so software treats them as having a resolution of 1440x900. This means that 10px high text (for instance) uses 20 physical pixels and is still large enough to read, but is sharper than it would be on a screen with 1440x900 physical pixels.
When I use
.class { width: 800px; }
what does it actually mean?
When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop
So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?
The reference is a logical coordinate system that might be scaled in relation to the physical screen.
It's most common on a PC that the scale is 1:1. However as screens get larger it's becoming more common with computers that have scaled up display, which may also affect the browser.
The user can also zoom in the browser, which natually affects the scaling.
Devices like tablets and phones usually have a 2:1 scaling in the browser, sometimes even more. That means that the browser reports a smaller screen size, and everything is scaled up. This also affects the media queries, so even if the physical screen is larger, your CSS might not apply as the media query uses the screen size that the browser reports.
Also, if you don't lock the viewport using a meta tag, the mobile browser will scale the page to fit the screen, so whatever page width you specify will show up the same size.
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) {
}
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML